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

Question

我有一个包含一些文字和YouTube视频的div。我用CSS给它一个灰色的背景。我还将位置从顶部设置为4.4 em，从左侧设置为1％，并将其设置为98％宽。无论浏览器的大小或缩放如何，我希望底部的底部为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间隙，也可以使用＆＃34; calc（）＆＃34; css函数https://www.w3schools.com/cssref/func_calc.asp

示例：

height: calc(100vh - 4.4em);