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

Question

*我只使用CSS制作布局.

而我正在尝试做的是让headerdiv占用一定数量的高度像素,比如100px,然后contentdiv占据浏览器窗口高度的其余部分.

即浏览器窗口高度减去标题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; }