div 自适应100%高度

最近要写个页面，从上到下包含两个层，上面的层高度固定，下面的层要求填满剩下的屏幕，即100%高

我们先考虑只有一个层自适应高度的情况，在HTML4.0标准中，只需要设定height=100%,就能实现一个层的自适应高度，但是到xhtml1.0之后，百分比高度则是根据外围框体的高度来决定，所以我们可以设定body的高度为100%，样式表代码如下

 

html,body{margin:0;height:99%}.box{    height:100%;}

 

<div class="box"></div>

这样就实现了div的自适应高度。

有了前面的基础，再来说两个上下层中，下面那个层的自适应高度，先看代码

 

html,body{margin:0;height:99%}html{ padding-top: 50px; }.box1{    height:50px;    position:absolute;    top:0;}.box2{    height: 100%;}

<div class="box1"></div><div class="box2"></div>

我们看样式表，多了一个

....................................................................

这个方法同样适用于多个层的情况

具体请点击：http://www.verydemo.com/demo_c101_i38124.html