在保持流体容器 100% 宽度的同时保持纵横比

Question

对于以下项目，我想设置如下样式：

parentContainer - 宽度 100vw 和高度 100vh；所有项目都必须适合容器（即没有滚动条）
searchBar - 在顶部；将采用宽度 100vw，高度基于内容
bottomContainer - 剩余 space 未被 searchBar
videoContainer - 包含一个视频元素和一个标题；两项都必须在 bottomContainer 的整个高度内，但视频元素必须保持 16:9 纵横比；所有剩余宽度应由 sidebarContainer
video - 最初不会提供任何来源，但必须保持 16:9 的纵横比；
sidebarContainer - 一些带有 minWidth: 150px 的随机内容（在较小的屏幕上它会消失）；将占用 videoContainer 未使用的剩余宽度；

我能够满足大部分要求，但 videoContainer / video。如果我解决比率问题，video 元素太小了。如果我修复 video 元素大小，则不会保持纵横比或 videoContainer 不适合视口（即通常它会超出超宽屏幕的高度）。

样本： https://codesandbox.io/s/video-css-structure-dfc2q?file=/src/App.js

Answer 1

试试这个作为起始结构。视频容器完全响应 16:9 有和没有 <video> 标签。如果这不是您所期望的，请告诉我。

<div class="parentContainer">
  <header class="searchBar">
    <br>search<br><br>
  </header>
  <div class="rowContainer">
    <main class="videoContainer">
      <div class="video">
        video 16:9
        <!-- <video width="480" height="270" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video> -->
      </div>
      <div class="video-title">
        Title of the video
      </div>
    </main>
    <aside class="sidebarContainer">
      <br>Sidebar<br><br>
    </aside>
  </div>
  <footer class="bottomContainer">
    <br>bottom<br><br>
  </footer>
</div>

css 代码宽度和高度 100%（或 100vw 和 100vh）

*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  font: 400 1rem/1.5 sans-serif;
}
header, main, aside, footer {
  display: block;
}
.parentContainer {
  height: 100%;
  overflow: hidden;
}
.rowContainer {
  display: flex;
}
.sidebarContainer {
  flex: 0 0 25%;
  width: 25%;
}
.videoContainer {
  flex: 0 0 75%;
  width: 75%;
}
.video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.video::before {
  display: block;
  content: "";
  padding-top: 56.25%; /* 9:16 */
}
.video video {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.parentContainer {background-color: lightgreen;}
.searchBar {background-color: yellow;}
.videoContainer {background-color: silver;}
.video-title {background-color: lightgrey;}
.sidebarContainer {background-color: pink;}

Answer 2

如果侧边栏只是智能手机上的问题，则将 css parentContainer、rowContainer、sidebarContainer 和 videoContainer 更改为下面的 css。

在小屏幕上，左右栏会堆叠，这意味着在小屏幕上，视频位于边栏的顶部。

/* overflow temporary commented for testing */
.parentContainer {
  height: 100%;
  /* overflow: hidden; */
}
/* wrap columns if total width > 100% */
.rowContainer {
  display: flex;
  flex-wrap: wrap;
}
/* small screens */
.sidebarContainer,
.videoContainer {
  flex: 0 0 100%;
  width: 100%;
}
/* medium and large screens */
@media (min-width: 992px) {
  .sidebarContainer {
    flex: 0 0 25%;
    width: 25%;
  }
  .videoContainer {
    flex: 0 0 75%;
    width: 75%;
  }
}

在保持流体容器 100% 宽度的同时保持纵横比

Maintain aspect ratio while keeping 100% width of fluid container

html

css

html5-video

reactjs