头部固定、剩余高度自适应布局可以用很多方式, 比如flex 、calc() 等等,但是兼容性没那么好, 现在列举些兼容比较好的方案
方案1
代码如下
<div>
<div class="top">我是头部</div>
<div class="middle">
我是主体信息
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.top {
width: 100%;
height: 70px;
background-color: red;
font-size: 30px;
line-height: 70px;
}
.middle {
position: absolute;
top: 70px;
bottom: 40px;
width: 100%;
background-color: sandybrown;
font-size: 70px;
text-align: center;
}
</style>
效果
方案 2
<div class="outer">
<div class="top">我是头部</div>
<div class="middle">
我是主体信息
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.outer{
height: 100%;
padding-top: 70px;
box-sizing: border-box;
}
.top {
width: 100%;
height: 70px;
background-color: yellowgreen;
font-size: 30px;
line-height: 70px;
position: absolute;
top: 0px;
left: 0;
}
.middle {
width: 100%;
height: 100%;
background-color: beige;
font-size: 70px;
text-align: center;
}
</style>
效果
方案 3
将方案二 .top
代码修改如下 效果一样
.top {
width: 100%;
height: 70px;
background-color: yellowgreen;
font-size: 30px;
line-height: 70px;
margin-top: -70px;
}