调试

Web/src/App.vue

@@ -1,32 +1,28 @@
 <template>
-  <van-config-provider :theme="theme" :style="{ 
+  <van-config-provider :theme="theme" class="app-provider">
-      height: '100%',          
+    <pre style="position:fixed; left:0; top:0; z-index:9999;
-      border: '2px solid red'  
-    }" class="app-root">
-<pre
-  style="position:fixed; left:0; top:0; z-index:9999;
          background:rgba(0,0,0,0.7); color:#0f0;
          font-size:10px; max-height:50vh; overflow:auto;">
   {{ log }}
 </pre>
 
-    <div class="app-main">
+    <div class="app-root">
       <RouterView />
+      <van-tabbar v-model="active" v-show="showTabbar">
+        <van-tabbar-item icon="notes-o" to="/calendar">
+          日历
+        </van-tabbar-item>
+        <van-tabbar-item icon="balance-list-o" to="/" @click="handleTabClick('/')">
+          账单
+        </van-tabbar-item>
+        <van-tabbar-item icon="records-o" to="/email" @click="handleTabClick('/email')">
+          邮件
+        </van-tabbar-item>
+        <van-tabbar-item icon="setting-o" to="/setting">
+          设置
+        </van-tabbar-item>
+      </van-tabbar>
     </div>
-    <van-tabbar v-model="active" v-show="showTabbar">
-      <van-tabbar-item icon="notes-o" to="/calendar">
-        日历
-      </van-tabbar-item>
-      <van-tabbar-item icon="balance-list-o" to="/" @click="handleTabClick('/')">
-        账单
-      </van-tabbar-item>
-      <van-tabbar-item icon="records-o" to="/email" @click="handleTabClick('/email')">
-        邮件
-      </van-tabbar-item>
-      <van-tabbar-item icon="setting-o" to="/setting">
-        设置
-      </van-tabbar-item>
-    </van-tabbar>
   </van-config-provider>
 </template>
 
@@ -43,9 +39,9 @@ const updateInfo = () => {
     documentElementClientHeight: document.documentElement.clientHeight,
     viewport: window.visualViewport
       ? {
-          height: window.visualViewport.height,
+        height: window.visualViewport.height,
-          offsetTop: window.visualViewport.offsetTop,
+        offsetTop: window.visualViewport.offsetTop,
-        }
+      }
       : null,
   }, null, 2)
 }
@@ -101,16 +97,15 @@ const handleTabClick = (path) => {
 </script>
 
 <style scoped>
-.app-root {
+.app-provider {
-  /* 用前面的 JS 动态高度方案，或至少用 100% 而不是 100vh */
+  /* 关键：让 config-provider 本身先占满视口 */
   height: 100%;
+}
+
+.app-root {
+  height: 100%;
+  border: 2px solid red;  /* 调试用红框 */
   display: flex;
   flex-direction: column;
 }
-
-/* 主体内容自己撑开，给 Tabbar 留出空间 */
-.app-main {
-  flex: 1;
-  overflow-y: auto;
-}
 </style>

Web/src/assets/base.css

@@ -84,10 +84,3 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-
-html, body, #app {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}

Web/src/assets/main.css

@@ -58,3 +58,9 @@ a,
     padding: 0 2rem;
   }
 }
+
+html, body, #app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}