CSS div 大小相对于视口边界？

Question

我有一个 div，其中包含一些文本和一个 YouTube 视频。我用 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);

CSS div 大小相对于视口边界？

CSS div sizing relative to viewport borders?

javascript

css

css-position

positioning