调试

Web/src/App.vue

@@ -1,18 +1,13 @@
 <template>
-  <van-config-provider :theme="theme" :style="{ 
-      height: '100%',          
-      border: '2px solid red'  
-    }" class="app-root">
-<pre
-  style="position:fixed; left:0; top:0; z-index:9999;
+  <van-config-provider :theme="theme" class="app-provider">
+    <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 />
-    </div>
       <van-tabbar v-model="active" v-show="showTabbar">
         <van-tabbar-item icon="notes-o" to="/calendar">
           日历
@@ -27,6 +22,7 @@
           设置
         </van-tabbar-item>
       </van-tabbar>
+    </div>
   </van-config-provider>
 </template>
 
@@ -101,16 +97,15 @@ const handleTabClick = (path) => {
 </script>
 
 <style scoped>
-.app-root {
-  /* 用前面的 JS 动态高度方案，或至少用 100% 而不是 100vh */
+.app-provider {
+  /* 关键：让 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%;
+}