头部固定 剩余高度自适应布局

头部固定、剩余高度自适应布局可以用很多方式， 比如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;
}