css 头部和底部固定中间内容滚动
1、flex布局
利用flex布局,上下两边固定,中间为剩下的100%
高度设置为100%;中间如果内容过多,则设置overflow:auto就会出现滚动条
<style type="text/css" scoped> .wrap { display: flex; flex-direction: column; width: 100%; height: 100%; font-size: 0.14rem; } /*设置顶部和底部的高度*/ .header, .footer { height: 140px; line-height: 140px; background-color: #D8D8D8; text-align: center; } .main { flex: 1; height: 100%; overflow-x: hidden; overflow-y: auto; } </style> <template> <div class="wrap"> <div class="header">头部</div> <div class="main"> 内容多才能滚动 </div> <div class="footer">底部</div> </div> </div> </template>
2、通过css的calc方法计算出中间内容的高度
中间内容的class
.main { height: calc(100% - 280px); overflow-x: hidden; overflow-y: auto; }