上下高度固定（100px），中间自适应

1、绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>absolute</title>
        <style>
        html,body{
            height:100%;
        }
        </style>
    </head>
    <body>
        <style>
        .container>div {
            position: absolute;
            width : 100%;
        }
        .header {
            top: 0;
            height: 100px;
            background-color: red;
        }
        .body {
            top: 100px;
            bottom: 100px;
            background-color: blue;
        }
        .footer {
            bottom: 0;
            height: 100px;
            background-color: red;
        }
        </style>
            <div class="container">
              <div class="header"></div>
              <div class="body"></div>
              <div class="footer"></div>
            </div>
          </body>
</html>

2、弹性布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flex</title>
        <style>
            html,body{
                height:100%;
            }
        </style>
    </head>
    <body>
        <style>
        .container {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .body {
            flex: 1 1 auto;
            background-color: blue;
        }
        .header, .footer {
            height: 100px;
            flex: 0 0 auto;
            background-color: red;
        }
        </style>
            <div class="container">
              <div class="header"></div>
              <div class="body"></div>
              <div class="footer"></div>
            </div>
    </body>
</html>

3、网格布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>grid</title>
        <style>
            html,body{
                height:100%;
            }
        </style>
    </head>
    <body>
        <style>
        .container {
            display: grid;
            height : 100%;
            grid-template-rows : 100px auto 100px;
        }
        .header, .footer{
            background-color:red;
        }
        .body {
            background-color:blue;
        }
        </style>
        <div class="container">
            <div class="header"></div>
            <div class="body"></div>
            <div class="footer"></div>
        </div>
    </body>
</html>

4、表格布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>table</title>
        <style>
            html,body{
                height:100%;
            }
        </style>
    </head>
    <body>
        <style>
        .container {
            display: table;
            height : 100%;
            width :100%;
        }
        .container>div{
            display: table-row;
        }
        .header,  .footer  {         
            height:100px;
            background-color:red;
        }
        .body {
            background-color:blue;
        }
        </style>
        <div class="container">
            <div class="header"></div>
            <div class="body"></div>
            <div class="footer"></div>
        </div>
    </body>
</html>

PS：不知道为什么表格布局里面设置背景颜色无效，自己在那时还是没有解决。当然这也算是在这种情况下使用表格布局的一个缺点吧，背景色容易被屏蔽。有哪位童鞋能够很好处理这个问题的还请指教一波，谢谢> <

上下高度固定（100px），中间自适应

1、绝对定位

2、弹性布局

3、网格布局

4、表格布局

皮卡丘丘丘

引用和评论

常用Git操作记录（未完待续）

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式