flex全屏布局

     *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        .wrap{
            display:-webkit-box;
            display:-webkit-flex;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-orient:vertical;
            -webkit-flex-direction:column;
            -ms-flex-direction:column;
            flex-direction:column;
            width:100%;
            height:100%;
        }
        .header,.footer{
            height:40px;
            line-height:40px;
            text-align: center;
            color: #fff;
            background-color:#379aeb;
            text-align:center;
        }
        .main{
            -webkit-box-flex:1;
            -webkit-flex:1;
            -ms-flex:1;
            flex:1;
            width:100%;
            height: 200px;
            overflow: auto;
        }

<div class="wrap">
    <div class="header">header</div>
        <div class="main">
            内容区域<br>
            内容区域<br>
            内容区域<br>
        </div>
   <div class="footer">footer</div>
</div>