使用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的方法。

正如您从下面的小提琴中看到的那样，当前的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; }