Сохранение пропорций при сохранении 100% ширины контейнера для жидкости

Question

Для следующих элементов я хочу стилизовать следующим образом:

1. parentContainer - ширина 100vw и высота 100vh; все элементы должны уместиться внутри контейнера (ie без полос прокрутки)
2. searchBar - вверху; будет принимать ширину 100vw, а высота зависит от содержимого
3. bottomContainer - занимает оставшееся пространство, не занятое searchBar
4. videoContainer - содержит видеоэлемент и заголовок; оба элемента должны умещаться в пределах полной высоты bottomContainer, НО видеоэлемент должен поддерживать соотношение сторон 16:9; всю оставшуюся ширину следует заполнить sidebarContainer
5. video - исходный текст не будет изначально предоставлен, но необходимо сохранить соотношение сторон 16:9;
6. sidebarContainer - некоторый случайный контент, который будет иметь minWidth: 150px (на меньших экранах он исчезнет); займет оставшуюся ширину, не используемую videoContainer;

Я смог удовлетворить большинство требований, но videoContainer / video. Если я исправлю проблему с соотношением, элемент video будет слишком маленьким. Если я исправлю размер элемента video, соотношение сторон не сохраняется или videoContainer не помещается в область просмотра (ie обычно выходит за пределы высоты на очень широких экранах).

Пример: https://codesandbox.io/s/video-css-structure-dfc2q?file= / src / App. js

Answer 1

Если боковая панель является проблемой только на смартфоне, измените 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%;
  }
}

Answer 2

Попробуйте это как стартовую структуру. Контейнер видео полностью соответствует формату 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;}