Head fixation remaining highly adaptive layout

Head fixing, remaining highly adaptive layout may in many ways, such as flex, calc (), etc., but not so good compatibility, now include some good program compatible

Scheme 1
following code

  <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>

Effects

Scenario 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>

effect

Scheme 3
The scheme two .topcode change as an effect

.top {
    width: 100%;
    height: 70px;
    background-color: yellowgreen;
    font-size: 30px;
    line-height: 70px;
    margin-top: -70px;
}