javascript - CSS div 大小相对于视口(viewport)边界？

Question

我有一个包含一些文本和一个 YouTube 视频的 div。我用 CSS 给它一个灰色的背景。我还将位置设置为距顶部 4.4 em，距左侧 1%，并使其宽度为 98%。无论浏览器的大小或缩放比例如何，我都希望 div 的底部距底部 4.4 em。我怎样才能做到这一点？我可以使用 CSS，还是需要 Javascript？如果您给出的答案包含 Javascript 代码，请不要使用 jQuery。

div {
  position: absolute;
  left: 1%;
  width: 98%;
  top: 4.4em;
  background: grey;
}

body {
  width: 100%;
  color: white;
}

EDIT: Here is my HTML:

<div>
  <h1>A Heading</h1>
  YOUTUBE VIDEO HERE
</div>

Answer 1

您可以使用透明边框来模拟底部的 4.4em 间隙，或者您可以使用“calc()”css 函数 https://www.w3schools.com/cssref/func_calc.asp

例子:

height: calc(100vh - 4.4em);