flex上下固定中间滚动布局

html {  
    font-size:62.5%;  
    width:100%;  
    height:100%;  
    -webkit-font-smoothing:antialiased;  
}  
body {  
    text-align:center;  
    -webkit-user-select:none;  
    width:100%;  
    height:100%;  
    /*background:#fff;*/   /*默认背景颜色*/  
    /*font-size:1.2rem;*/   /*默认字体大小*/  
    /*color: #000;*/   /*默认字体颜色*/  
    font-family:"Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif;  
    -webkit-text-size-adjust:none;  
}  
* {  
    margin:0;  
    padding:0;  
    list-style:none;  
}  
i, em, b {  
    font-style:normal;  
    font-weight:normal;  
}  
:-moz-placeholder {color:#ccc;}  
::-moz-placeholder {color:#ccc;}  
::-webkit-textarea-placeholder {color:#ccc;}  
:-ms-textarea-placeholder {color:#ccc;}  
  
img{  
    width:100%;  
    vertical-align:top;  
}  
input,textarea,select{  
    -webkit-appearance:none;  
    font-size:1.2rem;  
    border:0;  
    background:transparent;  
    font-family:"黑体","Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif;  
    outline:none;  
}  
input,a,span{  
    -webkit-tap-highlight-color: rgba(0,0,0,0);  
}  
  
/*flex最外框*/  
.page{  
    display:-webkit-box;  
    -webkit-box-orient:vertical;  
    height:100%;  
}  
/*flex内容区*/  
.page .content{  
    position:relative;  
    -webkit-box-flex:1;  
    -webkit-flex:1;  
    flex:1;  
    overflow:auto;  
    -webkit-overflow-scrolling:touch;  
  
    background-color:#ccc;  
}  
/*flex头部*/  
.header{  
    display: -webkit-box;  
}  
.header *{  
    display: block;  
}  
/*flex底部，按钮平均分布*/  
.footer{  
    overflow: hidden;  
    background:#fff;  
}  
.foot-nav{  
    display:-webkit-box;  
    height: 2rem;  
    line-height: 2rem;  
}  
.foot-nav *{  
    display: block;  
    -webkit-box-flex: 1;  
    -webkit-flex:1;  
    flex:1;  
} 
    </style>

<section class="page">  
        <header class="header">  
            我是头部  
        </header>  
        <section class="content">  
            <div>asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>

                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>

                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>asdasd<br>

                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>
                asdasd<br>

            </div>  
        </section>  
        <footer class="footer">  
            <nav class="foot-nav">  
                <b>首页</b>  
                <b>其他</b>  
                <b>中心</b>  
            </nav>  
        </footer>  
    </section>  

http://blog.csdn.net/qazxbjp2010/article/details/56670972

https://www.cnblogs.com/adengweb/p/5421669.html