uni-app CSS 内置变量：系统状态栏高度、NavigationBar 的高度、TabBar 的高度

变量

说明

由于在H5端，不存在原生导航栏和TabBar，也是前端div模拟。

如果设置了一个固定位置的居底view，在小程序和App端是在TabBar上方，但在H5端会与TabBar重叠。

此时可使用--window-bottom，不管在哪个端，都是固定在TabBar上方。

示例

返回顶部的按钮，距离底部高出20rpx。

.toTop {
    bottom: calc(var(--window-bottom) + 20rpx);
}

设置全屏背景颜色（默认：如果子元素没有铺满屏幕则根元素只有子元素的高度）。

<view class="root-view">
    <view>111</view>
    <view>222</view>
    <view>333</view>
</view>

<style>
    .root-view {
        height: calc(100vh - var(--status-bar-height) - var(--window-top) - var(--window-bottom));
    }
</style>

官方文档

https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F