小程序 scroll-view 撑满整个容器[纯CSS]

最新推荐文章于 2026-03-05 02:13:28 发布

原创最新推荐文章于 2026-03-05 02:13:28 发布 · 755 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #vue.js #小程序

收录于

js 同时被 2 个专栏收录

43 篇文章

订阅专栏

CSS3

9 篇文章

订阅专栏

本文探讨了在iPhone6设备上使用Flex布局时，如何处理scroll-view在容器中撑满并实现高度自适应的问题。通过示例代码展示了.box类的配置，包括.box-head和.box-foot的固定高度以及.box-scroll的设置，确保滚动视图在内容增加时能正确扩展。文章着重解释了使用flex:1和一个初始高度为1px的技巧来解决高度自适应的难题。

在这里插入图片描述

<view class="box"> 
 <view class="box-head"></view>
 <scroll-view class="box-scroll flex-center"><view>scroll-view 撑满整个容器</view></scroll-view> 
 <view class="box-foot"></view>
</view>

.box {
  	display: flex;
  	flex-direction:column;
  	height:100vh;
  	overflow:hidden;
 }
 .box-head {
	background-color: burlywood;
  	flex-shrink: 0;
  	height: 70px;
 }
 .box-foot {
   	background-color: cyan;
  	flex-shrink: 0;
  	height: 150rpx;
  	padding-bottom: env(safe-area-inset-bottom);
 }
 .box-scroll {
   	background-color: darkgoldenrod;
  	flex: 1;
  	height: 1px; 
  	/**flex：1 高度依然不会自适应加一个默认高度1px就可以自适应了*/
 }