javascript - 使用 CSS，如何在不设置显式高度的情况下使两个元素填充 window.innerHeight？

Question

我编写了以下 jsfiddle，它显示了一个包含两个元素的简单布局。

http://jsfiddle.net/64kps/RUjj2

HTML

<div id="hello">hello hello hello hello hello hello hello</div>
<div id="donut">donut</div>

JavaScript

var hello = document.querySelector('#hello');
var donut= document.querySelector('#donut');

var resize = function (event) {
    var helloHeight = window.getComputedStyle(hello).height
    helloHeight = helloHeight.replace('px', '');
    helloHeight = parseFloat(helloHeight);

    donut.style.height = (window.innerHeight - helloHeight) + 'px';
};

window.addEventListener('resize', resize, false);
resize();

我的问题

黄色元素固定在顶部，高度取决于它的内容(注意高度没有明确指定)

红色元素占用剩余的可用垂直空间来填充窗口。

请务必注意，随着窗口宽度的变化，黄色和红色元素的高度也会发生变化。

我想知道是否有任何方法可以使用纯 CSS 而不必使用 JavaScript 来实现这一点？

谢谢

Answer 1

要填充窗口，请将 body 标记的背景设置为填充颜色。您的 CSS 将是:

body {
  background-color: red;
}
#hello {
  background-color: yellow;
  font-size: 50px;
}

无需为#donut 设置背景颜色。