diff --git a/Web/src/views/CalendarView.vue b/Web/src/views/CalendarView.vue
index 6090c0f..a2aac00 100644
--- a/Web/src/views/CalendarView.vue
+++ b/Web/src/views/CalendarView.vue
@@ -13,8 +13,6 @@
     
     <ContributionHeatmap ref="heatmapRef" />
 
-    <!-- 底部安全距离 -->
-    <div style="height: calc(80px + env(safe-area-inset-bottom, 0px))"></div>
 
     <!-- 日期交易列表弹出层 -->
     <PopupContainer
@@ -306,6 +304,8 @@ onBeforeUnmount(() => {
 
 .calendar-container {
   /* 使用准确的视口高度减去 TabBar 高度（50px）和安全区域 */
+  height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px));
+  max-height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px));
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -336,4 +336,10 @@ onBeforeUnmount(() => {
   background: transparent !important;
 }
 
+/* Add margin to bottom of heatmap to separate from tabbar */
+:deep(.heatmap-card) {
+  margin-bottom: 20px;
+  flex-shrink: 0; /* Prevent heatmap from shrinking */
+}
+
 </style>