SOURCE

console 命令行工具 X clear

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