移动端，用flex弹性盒模型布局实现头部、底部固定，中间内容区可滑动浏览的效果

H5开发移动端项目时，常常会遇到此类问题，顶部navbar，底部tabbar,中间滑动展示内容，如果用position:fixed;往往会出各种问题，这时，你不如考虑一下flex布局，在移动端上使用，是真的香！

1.css部分

  body{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .page{
            display: flex;
            flex-direction: column;
            height: 300px;
        }
        .header{
            height: 40px;
            background: rgba(0,0,0,0.6);
            font-size:40px;
        }
        .content{
            flex: 1;
            border: 1px solid red;
            overflow: auto;
        }
        .footer{
            height: 40px;
            background: rgba(0,0,0,0.6);
            font-size:40px;
        }

2.html部分

<div class="page">
    <div class="header">
        i am header
    </div>
    <div class="content">
        content
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
    </div>
    <div class="footer">
        footer
    </div>
</div>

注： content区域的flex属性值为1，由该元素自动填充，page元素内剩下的空间。但头部，和底部是要固定高度的。另外，最重要的一点是在content元素上设置overflow:auto属性，即当该区域的内容超出其高度时，由滑动滚动条来浏览观看。

同时注意：在移动端，在某一次实现功能中，尽量不要过多地用fixed固定定位来实现类似弹窗的效果，因为问题比较多，用弹性盒模型布局实现，兼容性好。