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％的收益？没有。你需要设置身体的高度，以便它可以使用它。

<强> CSS：

html, body {
    height: 100%;
}

DEMO

Answer 2

这是因为顶部div的高度为px，第二个为百分比。现在你需要更加具体：

*{margin: 0px; padding 0px;}
#header {height: 30px; background-color: pink;}
#jumbo {position: absolute; top: 30px; height: 100%; width: 100%; background-color: blue; display:block}

JsFiddle：http://jsfiddle.net/usbs2/10/

或添加

html, body { height: 100%;  }

全高度不用CSS拉伸

2 个答案: