Использование flex в качестве дисплея и наличие видео в качестве дочернего элемента не соответствует моим настройкам заполнения - PullRequest
Новая
       6

Использование flex в качестве дисплея и наличие видео в качестве дочернего элемента не соответствует моим настройкам заполнения

0 голосов
/ 02 марта 2020

Я хотел бы иметь на странице HTML:

  • div заголовка - некоторая высота, основанная на его содержимом
  • div содержимого (ниже заголовка) - взять оставшаяся часть высоты ниже заголовка
  • таблица (в div содержимого) - взять 100% для обоих измерений его родительского элемента (div содержимого)
  • элемент видео (в таблице) - взять и резерв 100% для обоих измерений его родителя (td)

Вот что у меня есть: 

body { margin: 0; }

#main {
  position: absolute;
  left:0px;
  top:0px;
  
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background:red;
}

#header {
  background:yellow;
}

#content {
  background:gray;
  flex:1;
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

video {
  width: 100%;
  height: 100%;
}
<html>

<body>

<div id="main">

<div id="header">
Header
</div>
<div id="content">


<table>
<tr>
  <td>
    <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
  </td>
</tr>
</table>

</div>


</div>

</body>
</html>

Теперь проблема в теге видео (если вы запустите этот фрагмент, будут полосы прокрутки - я их не хочу).

Если я уберу видео тег, все будет работать как надо. Однако, если есть тег видео, он разрушает опцию 'flex': он увеличивает тд, следовательно, таблица также становится больше, а затем и содержимое - так что полосы прокрутки включены, и страница не помещается в screen.

Возможно, размер видео изменяется при загрузке мультимедиа, и в это время все операции css завершаются.

Но как сделать видео точным? тот же размер, что и ширина 100% и высота его родителя (td) даже во время воспроизведения?

Ответы [ 2 ]

1 голос
/ 02 марта 2020

Вы можете сделать видео position:absolute

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  min-height: 0;
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

td {
  position: relative;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div id="main">

    <div id="header">
      Header
    </div>
    <div id="content">


      <table>
        <tr>
          <td>
            <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
          </td>
        </tr>
      </table>

    </div>


  </div>
0 голосов
/ 02 марта 2020

Хочешь этого ... 

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  height: 100%;
  
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

td {
  position: relative;
}

video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<html>

<body>

<div id="main">

<div id="header">
Header
</div>
<div id="content">


<table>
<tr>
  <td>
    <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
  </td>
</tr>
</table>

</div>


</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...