diff --git a/Web/src/App.vue b/Web/src/App.vue
index 6ac5457..7e28ff9 100644
--- a/Web/src/App.vue
+++ b/Web/src/App.vue
@@ -33,6 +33,12 @@ import { ref, onMounted, onUnmounted, computed } from 'vue'
 const log = ref('')
 
 const updateInfo = () => {
+  // 获取真实的视口高度（PWA 模式下准确）
+  const vh = window.innerHeight
+  // 设置 CSS 变量，让所有组件使用准确的视口高度
+  document.documentElement.style.setProperty('--vh', `${vh}px`)
+  document.documentElement.style.setProperty('--vh-offset', `${vh}px`)
+  
   log.value = JSON.stringify({
     innerHeight: window.innerHeight,
     outerHeight: window.outerHeight,
@@ -43,16 +49,24 @@ const updateInfo = () => {
         offsetTop: window.visualViewport.offsetTop,
       }
       : null,
+    cssVarVh: getComputedStyle(document.documentElement).getPropertyValue('--vh'),
   }, null, 2)
 }
 
 onMounted(() => {
   updateInfo()
   window.addEventListener('resize', updateInfo)
+  // 监听 iOS Safari 视口变化
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', updateInfo)
+  }
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateInfo)
+  if (window.visualViewport) {
+    window.visualViewport.removeEventListener('resize', updateInfo)
+  }
 })
 
 const route = useRoute()
@@ -98,14 +112,27 @@ const handleTabClick = (path) => {
 
 <style scoped>
 .app-provider {
-  /* 关键：让 config-provider 本身先占满视口 */
-  height: 100%;
+  /* 使用准确的视口高度 CSS 变量 */
+  height: var(--vh, 100vh);
+  width: 100%;
 }
 
 .app-root {
   height: 100%;
+  width: 100%;
+  position: relative;
   border: 2px solid red;  /* 调试用红框 */
-  display: flex;
-  flex-direction: column;
+}
+
+/* TabBar 固定在底部 */
+:deep(.van-tabbar) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-bottom: 0 !important;
+  /* 移除可能的安全区域内边距 */
+  padding-bottom: constant(safe-area-inset-bottom) !important;
+  padding-bottom: env(safe-area-inset-bottom) !important;
 }
 </style>
diff --git a/Web/src/assets/main.css b/Web/src/assets/main.css
index bb1e9cd..1547db8 100644
--- a/Web/src/assets/main.css
+++ b/Web/src/assets/main.css
@@ -6,10 +6,10 @@ html, body {
   overscroll-behavior-y: none;
   -webkit-overflow-scrolling: touch;
   touch-action: pan-y;
-  position: fixed;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  margin: 0;
+  padding: 0;
 }
 
 body {
@@ -22,12 +22,8 @@ body {
   max-width: 1280px;
   margin: 0 auto;
   font-weight: normal;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow-y: auto;
+  width: 100%;
+  height: 100%;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
 }
diff --git a/Web/src/styles/common.css b/Web/src/styles/common.css
index 4616f53..cdd7f72 100644
--- a/Web/src/styles/common.css
+++ b/Web/src/styles/common.css
@@ -1,7 +1,8 @@
 /* 通用页面容器样式 */
 .page-container {
-  min-height: 100vh;
+  min-height: var(--vh, 100vh);
   background-color: #f5f5f5;
+  padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
 }
 
 @media (prefers-color-scheme: dark) {
@@ -12,7 +13,7 @@
 
 /* 下拉刷新包装器 */
 .refresh-wrapper {
-  min-height: calc(100vh - 46px);
+  min-height: calc(var(--vh, 100vh) - 46px - 50px - env(safe-area-inset-bottom, 0px));
 }
 
 /* 增加卡片组的对比度 */
diff --git a/Web/src/views/CalendarView.vue b/Web/src/views/CalendarView.vue
index 3600601..18b5f98 100644
--- a/Web/src/views/CalendarView.vue
+++ b/Web/src/views/CalendarView.vue
@@ -183,13 +183,16 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
 
 <style scoped>
 .calendar-container {
-  height: 100vh;
+  /* 使用准确的视口高度减去 TabBar 高度（50px）和安全区域 */
+  height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px));
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .calendar-container :deep(.van-calendar) {
   height: 100%;
+  overflow: auto;
 }
 
 .date-transactions {
diff --git a/Web/src/views/EmailRecord.vue b/Web/src/views/EmailRecord.vue
index 58ff808..f304018 100644
--- a/Web/src/views/EmailRecord.vue
+++ b/Web/src/views/EmailRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="email-record-container">
+  <div class="email-record-container" style="padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));">
     <!-- 顶部导航栏 -->
     <van-nav-bar title="邮件记录" fixed placeholder>
       <template #right>
diff --git a/Web/src/views/SettingView.vue b/Web/src/views/SettingView.vue
index 6a22858..4e62eab 100644
--- a/Web/src/views/SettingView.vue
+++ b/Web/src/views/SettingView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));">
     <van-nav-bar title="设置" />
     <div class="detail-header">
       <p>账单导入</p>
diff --git a/Web/src/views/SmartClassification.vue b/Web/src/views/SmartClassification.vue
index 3ece848..c9f0d6b 100644
--- a/Web/src/views/SmartClassification.vue
+++ b/Web/src/views/SmartClassification.vue
@@ -292,8 +292,8 @@ onMounted(() => {
 
 <style scoped>
 .smart-classification {
-  min-height: 100vh;
-  padding-bottom: 60px;
+  min-height: var(--vh, 100vh);
+  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
 }
 
 /* 统计信息 */
diff --git a/Web/src/views/TransactionsRecord.vue b/Web/src/views/TransactionsRecord.vue
index fddf747..1344d9f 100644
--- a/Web/src/views/TransactionsRecord.vue
+++ b/Web/src/views/TransactionsRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="transaction-record-container">
+  <div class="transaction-record-container" style="padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));">
     <!-- 顶部导航栏 -->
     <van-nav-bar title="交易记录" fixed placeholder style="z-index: 9999;">
       <template #right>