仅使用 CSS 将 div 高度设置为浏览器的高度

Question

*我正在使用 CSS 仅制作布局。

我正在尝试让header div 占用一定数量的高度像素，例如 100px，然后content div 占用浏览器窗口的其余高度。

即浏览器窗口高度减去标题 div 的高度。

所以HTML如下，

<div id="header"></div>

<div id="content"></div>

....这是我目前得到的 CSS。

html, body {margin: 0; padding: 0; height: 100%;}

#header {width: 100%; height: 100px; background-color: #333;}

#content {position: relative; top: 10px; width: 100%; /*height: auto !important;*/  min-height: 100%; background-color: #999; }

我知道，因为我已经做到了，这可以通过 JS/Jquery 来根据浏览器的高度设置内容 div 的高度，但我很想知道是否有办法做到这一点只是使用CSS。

从下面的 Fiddle 可以看出，当前的 CSS 只是让内容 div 在底部从屏幕上射出。

http://jsfiddle.net/PysLY/

Answer 1

我得到了这个结果：http://jsfiddle.net/ZC7BT/

html, body {margin: 0; padding: 0; height: 100%;}

#header {width: 100%; height: 100px; background-color: #333;}

#content {width: 100%; min-height: calc(100% - 100px); background-color: #999; overflow:auto; }