CSS实现div的高度自适应填满屏幕

首先html结构

<div id="main">

<div id="nav"></div>

<div id="content"></div>

</div>

然后基本的样式

html, body {

height:100%;

margin:0px;

padding:0px;

}

#main {

background-color:#999;

height:100%;

}

#nav {

background-color:#85d989;

width:100%;

height:50px;

}

最后的重点

#content {

background-color:#cc85d9;

width:100%;

position:absolute;

top:50px;

bottom:0px;

left:0px;

}

重点就是用定位脱离标准流，然后top和bottom一起使用，这是很反常规的用法，但是是最有效的方法，当然还有很多奇葩用法，以后的文章会一一为大家介绍。