移动端上下固定中间滚动的布局

html :代码如下

	<template>
		<div class="wrapper">
			  <!-- 头部 -->
			  <header><Header/></header>    
			  <!-- 中间滚动区域 -->
			    <section>
			      <keep-alive>
			        <router-view></router-view>
			      </keep-alive>
			    </section>
			    <!-- 底部 -->
			  <footer><Footer/></footer> 
		</div>
	</template>

css代码如下

		<style scoped>
		html,body{
		  height:100%;
		}
		.wrapper{
		  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;
		  background-color:#D8D8D8;
		  text-align:center;
		}
		section{
		  -webkit-box-flex:1;
		  -webkit-flex:1;
		  -ms-flex:1;
		  flex:1;
		  width:100%;
		  overflow:auto;/* winphone8和android4+ */
		  -webkit-overflow-scrolling: touch; /* ios5+ */
		}
		</style>

效果