uniapp中scroll-view高度样式，解决手机端问题

最新推荐文章于 2025-06-12 16:53:02 发布

原创最新推荐文章于 2025-06-12 16:53:02 发布 · 6.6k 阅读

16 ·

CC 4.0 BY-SA版权

前端编程同时被 2 个专栏收录

26 篇文章

订阅专栏

css

6 篇文章

订阅专栏

本文详细解析了在uniapp中scroll-view组件高度适配的解决方案，包括不同平台（H5和APP）的计算方式，以及在使用自定义导航栏和tab时的调整方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.scroll-container {
	/* #ifdef H5 */
	height: calc(100vh - 88rpx - 100rpx - env(safe-area-inset-bottom) - var(--status-bar-height));
	/* #endif */
	/* #ifdef APP-PLUS */
	height: calc(100vh - 88rpx - env(safe-area-inset-bottom));
	/* #endif */
}

以上为没有自定义导航栏和tab时对应的解决方案。h5端：100vh代表整个屏幕区域的高度，100rpx是导航栏高度，88rpx是顶部栏目分类tab的高度，接下来是底部安全距离和导航栏高度，这个是uniapp内部定义。APP端：100vh应该是当前webview也就是除去导航等app自带控件的高度，内容区域所占高度，所以只需要减tab高和安全距离即可。

如果使用了自定义导航就需要都减去自定义导航高度。100vh总的来说就是我们所写的内容块的高度（即template里的高度），自定义就包含进内容块里面了，系统默认的编译在外层，可以观察浏览器端的结构。

问题描述

一开始使用的是计算高度赋值给scroll-view，浏览器、模拟器、小程序测试都没有问题，但是手机端出现了问题，底部出现了多余的滑动空间。