写项目遇到了一个问题,div自动铺满屏幕,以适配不同屏幕的大小,查了资料,找个一个特别简单的办法,记录一下
需求描述:
1.页面有一个公共的头部,高度固定。
2.下面是正文的div,要求让这个div自动撑满高度,底部不要有白屏缝隙,不能出现滚动条。
写一个小demo
html部分
<div class="main">
<div class="top"></div>
<div class="content"></div>
</div>
css部分
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
}
.top {
height: 100px;
background: pink;
}
.content {
position: absolute;
width: 100%;
top: 100px;
left: 0;
bottom: 0;
background: yellowgreen;
}
简单说一下就是让最外层父级高度和宽度100%,头部给高度固定,内容区域高度100%