上下固定中间自适应布局

使用flex布局

还可以使用flex布局实现这一布局，将flex-direction设置为column，定义排列方向为竖排，还需注意的是要定义页面的整体高度为100%

<meta charset="UTF-8">

<title>flex布局实现</title>

<style type="text/css">

    html,body{

        padding:0;

        margin:0;

        height:100%; /*定义页面整体高度为100%，重要*/

    }

    .container{

        display:flex; /*父元素的定义为flex布局*/

        height:100%; /*这里也要定义，重要*/

        width:100%;

        flex-direction: column; /*定义排列方向为竖排*/

    }

    .header{

        height:100px; /*头部固定高度*/

        background: red;

    }

    .footer{

        height:100px; /*尾部固定高度*/

        background: yellow;

    }

    .main{

        background: #ccc;

        flex:1; /*中间分配剩下的所有空间*/

        overflow:auto;

    }

</style>