html - 全高不使用 CSS 拉伸(stretch)

Question

我希望蓝色区域始终填满屏幕上剩余的窗口高度，但它根本不会出现。

这是我的代码:http://jsfiddle.net/spadez/usbs2/1/

HTML:

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

CSS:

*{margin: 0px; padding 0px;}

    #header {height: 30px; background: pink;}
    #jumbo {height: 100%; background: blue;}

那么，为什么它不起作用？

Answer 1

目前你得到 100% 的是什么？没有什么。您需要设置 body 的高度，以便它可以使用。

CSS:

html, body {
    height: 100%;
}

DEMO