使用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设置背景颜色。

Answer 2

你必须给身体或父母div一个特定的高度才能达到这个目的，看看：

#hello {
 background-color: yellow;
 font-size: 50px;
}
#donut {
 background-color: red;
 height:100%;
}
body{height:1000px;}​

http://jsfiddle.net/hillsons/vqAaE/

Answer 3

这是我解决问题的方法

hrml：

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

的CSS：

#hello {
    background-color: yellow;
    font-size: 60px;
}
#donut {
    background-color: red;
    height:100%;
}
#asd{
    position:absolute;
    height:auto;
    top:0;
    bottom:0;
}

我在ie8 +，ff16 chrome 22

上测试了它

小提琴链接：http://jsfiddle.net/RUjj2/8/