首先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一起使用，这是很反常规的用法，但是是最有效的方法，当然还有很多奇葩用法，以后的文章会一一为大家介绍。
首先html结构 然后基本的样式 html, body { height:100%; margin:0px; pa...
CSS实现div的高度填满剩余空间参考：https://www.cnblogs.com/yoyogis/p/404...
方法一：div模拟textarea文本域轻松实现高度自适应 HTML代码 CSS代码 CSS代码中，因为IE6不支...
【转】CSS实现div的高度填满剩余空间 转自：http://www.cnblogs.com/zhujl/arch...
背景介绍： A，B，C三个div自适应屏幕大小，布局如图所示： html： css：
背景 在开发活动页h5的情况下，很多元素都是背景图加DIV构成的，在如今响应式布局的要求下，很多能自动调整尺寸的元...
为了实现上面这个效果，完整版代码如下： div默认宽度全屏，高度自适应（根据里面内容的高度），如果定义了div高度...
方法一：div模拟textarea文本域实现高度自适应 div模拟textarea出现光标实现编辑功能，可添加此属...
问题描述：1.上下div,上div高度自适应，要求下面的div高度自适应/下div超出高度显示滚动条2.当浏览器窗...
在知乎上看到下面的题目： 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度...
本文标题：CSS实现div的高度自适应填满屏幕
本文链接：https://www.haomeiwen.com/subject/qqfvmxtx.html
网友评论