console
<header class="header">固定header</header>
<section class="content">
<h2>内容高度自适应</h2>
<ul>
<li>测试-----01</li>
<li>测试-----02</li>
<li>测试-----03</li>
<li>测试-----04</li>
<li>测试-----05</li>
<li>测试-----06</li>
<li>测试-----07</li>
<li>测试-----08</li>
<li>测试-----09</li>
<li>测试-----10</li>
<li>测试-----01</li>
<li>测试-----02</li>
<li>测试-----03</li>
<li>测试-----04</li>
<li>测试-----05</li>
<li>测试-----06</li>
<li>测试-----07</li>
<li>测试-----08</li>
<li>测试-----09</li>
<li>测试-----10</li>
<li>测试-----01</li>
<li>测试-----02</li>
<li>测试-----03</li>
<li>测试-----04</li>
<li>测试-----05</li>
<li>测试-----06</li>
<li>测试-----07</li>
<li>测试-----08</li>
<li>测试-----09</li>
<li>测试-----10</li>
<li>测试-----01</li>
<li>测试-----02</li>
<li>测试-----03</li>
<li>测试-----04</li>
<li>测试-----05</li>
<li>测试-----06</li>
<li>测试-----07</li>
<li>测试-----08</li>
<li>测试-----09</li>
<li>测试-----10</li>
<li>测试-----01</li>
<li>测试-----02</li>
<li>测试-----03</li>
<li>测试-----04</li>
<li>测试-----05</li>
<li>测试-----06</li>
<li>测试-----07</li>
<li>测试-----08</li>
<li>测试-----09</li>
<li>测试-----10</li>
</ul>
</section>
<footer class="footer">固定footer</footer>
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 60px;
position: absolute;
top: 0;
background:red;
color: #fff;
text-align: center;
line-height: 60px;
}
.footer {
width: 100%;
height: 60px;
background: red;
color: #fff;
position: absolute;
bottom: 0;
text-align: center;
line-height: 60px;
}
.content {
width: 100%;
position: absolute;
top: 60px;
bottom: 60px;
overflow-y: auto;
background: darkgray;
}