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>
效果