css - 自举 |两列一列 16 :9 video and some text

Question

我想使用 Bootstrap 实现类似的目标:

|--------------------|------| ^
|                    | Some | |
|       16/9         | Text | | 90% height
|                    |      | |
|--------------------|------| v
<--------------------------->
   width 100% (screen width)

我已经能够创建视频保持 16/9 比例的两个容器，但 Div 无法容纳剩余空间。相反，视频只是覆盖了正确的 DIV。这意味着我将添加到我的 DIV 中的文本不会居中......正如您在那里看到的那样:

你能帮帮我吗？

Answer 1

所以，我设法用 Javascript 做到了。一种简单的方法。

<script>

var zvHeight = (screen.availHeight/100)*80;
var zvWidth = (zvHeight/9)*16;
document.getElementById('zv').style.width = zvWidth+"px";

zpsWidth = screen.availWidth-zvWidth;
document.getElementById('zps').style.width = zpsWidth+"px";
</script>