vue移动端头部和底部不动,中间自由滑动的设置
vue移动端头部header和底部footer不动,中间main自由滑动的设置<template><div id="app"><div class="header"></div><div class="main"></div><div class="footer"></div></div>&
·
vue移动端头部和底部不动,中间自由滑动的设置
1、简单创建header,main,footer三个盒子
<template>
<div id="app">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
</template>
2、style中加入以下样式即可,其实就是利用弹性盒布局,让中间的盒子main自动撑满剩余部分,然后在main里面加个盒子,宽高和main一样,然后 overflow-x: auto;即可。
<style lang='scss' scoped>
#app {
display: flex;
flex-direction: column;
height: 100%;
}
.main {
//撑满剩余部分
flex: 1;
overflow-x: hidden;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)