Div Flex-Grow с расширением тега Video с включением размера заголовка при включении DOCTYPE html - PullRequest
Новая
       32

Div Flex-Grow с расширением тега Video с включением размера заголовка при включении DOCTYPE html

0 голосов
/ 08 мая 2020

Я использую Chrome 81, последняя версия.

Я включаю <video> в контейнер <div>, для которого установлено значение flex-grow: 1. Идея в том, что есть заголовок, и нижняя часть страницы заполняется видео, которое будет содержаться наилучшим образом. Странная проблема заключается в том, что когда окно сжимается по вертикали и когда полный размер изображения соответствует окну, появляется полоса прокрутки и увеличивается до тех пор, пока размер заголовка не будет удерживаться полосой прокрутки. Как только заголовок содержится в полосе прокрутки, видео также начинает сжиматься. Например:

Scrollbar grows to contain header

Я изначально думал, что это проблема Vuetify, и задал этот вопрос на Как разрешить гибкости в Vuetify исключать заголовок при вертикальном сжатии видео . С тех пор я сузил его до чистого HTML - и фактически до тега DOCTYPE. Если я удалю <!DOCTYPE html>, полоса прокрутки будет вести себя именно так, как я хочу. Если я добавлю DOCTYPE обратно, ошибка появится снова.

Вот HTML: 

<!DOCTYPE html>
<html>
  <body style="margin: 0">
    <div style="display: flex; flex-direction: column; height: 100vh; max-height: 100vh">
      <div style="background-color: red">
        <div style="height: 100px"></div>
      </div>
      <div style="position: relative; flex-grow: 1; margin: 0 auto; width: 100%; height: 100%">
        <video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" style="width: 100%; height: 100%; background-color: black" controls></video>
      </div>
    </div>
  </body>
</html>

Я действительно не могу управлять тегом DOCTYPE в JSFiddle et c.

Кто-нибудь знает, как я могу добиться желаемого поведения?

1 Ответ

0 голосов
/ 09 июня 2020

В случае, если кто-то еще столкнется с этой проблемой в будущем, единственный способ получить размер тега <video> так, как я хочу, - это использовать <table> для вертикального размера ячеек. Тег видео идет вместе с ним (см. Код ниже). Кажется, что flex-grow должен работать, но я не могу заставить его работать с <video>. Если вы можете продемонстрировать, как заставить его работать, пожалуйста. Спасибо! 

<!DOCTYPE html>
<html>
  <body style="margin: 0">
    <table style="height: 100vh; min-height: 100vh; max-height: 100vh; width: 100%; border-spacing: 0">
      <tr style="height: 100px; background-color: red">
        <td style="padding: 0"></td>
      </tr>
      <tr>
        <td style="padding: 0">
          <div style="position: relative; height: 100%">
            <video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" style="position: absolute; width: 100%; height: 100%; background-color: black" controls></video>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>
...