使用Flex布局实现头部固定，内容区域滚动

最新推荐文章于 2024-03-18 18:36:08 发布

Zan^Z

最新推荐文章于 2024-03-18 18:36:08 发布

阅读量2.5k

点赞数

分类专栏：前端 flex布局

本文链接：https://blog.csdn.net/Zan_Z/article/details/107023902

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

flex布局

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Flex布局来实现页面头部固定，内容区域可滚动的效果。这种方法不破坏HTML文档流，且兼容性更佳。在使用中需要注意，如果遇到无响应情况，可能需要移除外层view，同时在使用onReachBottom功能时可能会遇到问题。

摘要由CSDN通过智能技术生成

页面头部固定布局以前用 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	//设置溢出滚动
}