使用Flex布局实现头部固定内容区域滚动的方法
(编辑：jimmy 日期: 2024/11/28 浏览：3 次 )
页面头部固定布局以前用 position:fixed实现，如今可以用flex布局实现，快捷方便。
Flex布局好处：1.不破坏html文档流 2.兼容性更好。
display: flex 和 display: -webkit-box 仅是各阶段命名,并没有区别。
<view> <view class="header"></view> <view class="content"></view> </view>
page{
display: -webkit-box; //设置弹性布局
-webkit-box-orient: vertical; //设置子元素垂直布局
height: 100%;
}
.header:{
height: 50px; //设置头部高度( 位置固定)
}
.content:{
-webkit-box-flex: 1; //设置1等份占满全屏
overflow: auto //设置溢出滚动
}
注：如若没有反应，把外层view去掉
下一篇：详解flex布局下图片变形的解决方法