CSS Div尺寸相对于视口边界

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);