CSS实现div的高度自适应填满屏幕
2017-11-09 本文已影响0人
奇特思维家
首先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一起使用，这是很反常规的用法，但是是最有效的方法，当然还有很多奇葩用法，以后的文章会一一为大家介绍。
