uni-app x H5设置了tabbar页面会多一个与tabbar高度一样的元素uni-app.uni-app--showtabbar uni-page-body::after

uni-app x H5设置了tabbar页面会多一个与tabbar高度一样的元素uni-app.uni-app–showtabbar uni-page-body::after

项目信息 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows10 22H2
HBuilderX类型 正式
HBuilderX版本号 4.85
浏览器平台 Chrome
浏览器版本 144.0.7512.4（正式版本）dev （64 位）
项目创建方式 HBuilderX

bug描述：

uni-app x H5设置了tabbar页面会多一个与tabbar高度一样的元素(uni-app.uni-app–showtabbar uni-page-body::after)，每个tabbar页面都有，页面中也没有写任何元素，目前只在H5平台中发现，一开始我的HBuilderX是4.75版本，这个版本也存在这个问题，现在我升级到了4.85，问题依然存在

Image 1

Image 2


更多关于uni-app x H5设置了tabbar页面会多一个与tabbar高度一样的元素uni-app.uni-app--showtabbar uni-page-body::after的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个样式有什么影响吗？

更多关于uni-app x H5设置了tabbar页面会多一个与tabbar高度一样的元素uni-app.uni-app--showtabbar uni-page-body::after的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app x在H5平台下的样式问题。当页面配置tabBar后，系统会自动生成一个::after伪元素作为底部安全区域的占位，但计算逻辑存在偏差，导致在不需要安全区域的普通H5浏览器中也会显示这个占位元素。

临时解决方案：

在App.vue的样式中添加以下CSS代码：

.uni-app--showtabbar uni-page-body::after {
    height: 0 !important;
    display: none !important;
}
回到顶部