diff --git a/src/platforms/h5/components/app/index.vue b/src/platforms/h5/components/app/index.vue
index 3dc0fca77d48f9a2c241b8e581a1325a1a0c7183..d7166c537efeb7796783e3b72002aa79ab65df80 100644
--- a/src/platforms/h5/components/app/index.vue
+++ b/src/platforms/h5/components/app/index.vue
@@ -73,7 +73,9 @@ export default {
     hideTabBar (newVal, oldVal) {
       // TODO 不支持 css 变量时
       if (uni.canIUse('css.var')) {
-        const windowBottom = !newVal ? (TABBAR_HEIGHT + 'px') : '0px'
+        const windowBottomValue = !newVal ? (TABBAR_HEIGHT) : 0
+        const envMethod = uni.canIUse('css.env') ? 'env' : (uni.canIUse('css.constant') ? 'constant' : '')
+        const windowBottom = windowBottomValue && envMethod ? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))` : `${windowBottomValue}px`
         document.documentElement.style.setProperty('--window-bottom', windowBottom)
         console.debug(`uni.${windowBottom ? 'showTabBar' : 'hideTabBar'}：--window-bottom=${windowBottom}`)
       }
@@ -103,7 +105,7 @@ export default {
 }
 </script>
 
-<style>
+<style>
   @import "~uni-core/view/index.css";
 	uni-app {
 		display: block;
diff --git a/src/platforms/h5/view/bridge/subscribe/index.js b/src/platforms/h5/view/bridge/subscribe/index.js
index 4aa2157b82fc8b72c5ff57b83c842e29ae3f2bc0..8f8f7ed066c91d5ba85a3128ca2c39b4ee6a8b59 100644
--- a/src/platforms/h5/view/bridge/subscribe/index.js
+++ b/src/platforms/h5/view/bridge/subscribe/index.js
@@ -28,8 +28,8 @@ function updateCssVar (vm) {
     const windowTopValue = navigationBarType === 'default' || navigationBarType === 'float' ? NAVBAR_HEIGHT : 0
     const windowBottomValue = getApp().$children[0].showTabBar ? TABBAR_HEIGHT : 0
     const envMethod = uni.canIUse('css.env') ? 'env' : (uni.canIUse('css.constant') ? 'constant' : '')
-    const windowTop = windowTopValue && envMethod ? `calc(${windowTopValue}px + ${envMethod}(safe-area-inset-top))` : '0px'
-    const windowBottom = windowBottomValue && envMethod ? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))` : '0px'
+    const windowTop = windowTopValue && envMethod ? `calc(${windowTopValue}px + ${envMethod}(safe-area-inset-top))` : `${windowTopValue}0px`
+    const windowBottom = windowBottomValue && envMethod ? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))` : `${windowBottomValue}px`
     const style = document.documentElement.style
     style.setProperty('--window-top', windowTop)
     style.setProperty('--window-bottom', windowBottom)