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

首先html结构


然后基本的样式

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一起使用,这是很反常规的用法,但是是最有效的方法,当然还有很多奇葩用法,以后的文章会一一为大家介绍。

你可能感兴趣的:(CSS实现div的高度自适应填满屏幕)