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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容