diff --git a/src/app.scss b/src/app.scss
index 2ff25c6..e4f700b 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -8,8 +8,9 @@
     [相关说明](https://developers.weixin.qq.com/community/develop/doc/000a60f7d58a982f08d7ddfc456000)
 */
 
+// 总高度 - 自定义tabbar高度 - apple小黑条高度
 page {
-  height: 100%;
+  height: calc(100% - #{$customTabBarHeight} - constant(safe-area-inset-bottom));
+  height: calc(100% - #{$customTabBarHeight} - env(safe-area-inset-bottom));
   background-color: #f7f7f7;
 }
-
diff --git a/src/custom-tab-bar/index.module.scss b/src/custom-tab-bar/index.module.scss
index 9a301ff..3075c58 100644
--- a/src/custom-tab-bar/index.module.scss
+++ b/src/custom-tab-bar/index.module.scss
@@ -3,7 +3,7 @@
   left: 0;
   bottom: 0;
   width: 100%;
-  height: 100px;
+  height: $customTabBarHeight;
   display: flex;
   flex-flow: row nowrap;
   padding-bottom: env(safe-area-inset-bottom);
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 5549c46..50eed22 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -16,6 +16,9 @@ $font_size: 28px;
 $font_size_medium: 24px;
 $font_size_min: 22px;
 
+$customTabBarHeight: 100px;
+
+
 //安全底部距离
 .common_safe_area_y {
   width: 100%;