CSS-размеры под размер окна просмотра?

У меня есть 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>