From 294700a247a26933a90932a901b23810fc750e3a Mon Sep 17 00:00:00 2001
From: Akuria <46207353+Akur1a@users.noreply.github.com>
Date: Sat, 16 May 2026 10:43:10 +0800
Subject: [PATCH] fix: skip fixed footer height in auto-content-height
 calculation (#7910)

* fix: skip fixed footer height in auto-content-height calculation

When the Page component's footer has position: fixed, it is removed
from the normal document flow and should not be subtracted from the
available content height. Previously, the footer's offsetHeight was
always subtracted, causing incorrect height calculation for fixed
footers.

Also reset shouldAutoHeight before recalculating to prevent stale
state on hot reload.

Fixes #4576

* fix: replace getComputedStyle footer height check with footerFixed prop

Use an explicit `footerFixed` boolean prop instead of runtime
getComputedStyle detection to determine whether the footer height
should be excluded from content height calculation. This avoids
unreliable style queries and makes the behavior deterministic.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
---
 .changeset/page-auto-content-height.md                  | 5 +++++
 packages/effects/common-ui/src/components/page/page.vue | 7 +++++--
 packages/effects/common-ui/src/components/page/types.ts | 6 ++++++
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/page-auto-content-height.md

diff --git a/.changeset/page-auto-content-height.md b/.changeset/page-auto-content-height.md
new file mode 100644
index 000000000..94b81cc9c
--- /dev/null
+++ b/.changeset/page-auto-content-height.md
@@ -0,0 +1,5 @@
+---
+"@vben/common-ui": patch
+---
+
+fix: skip fixed footer height in auto-content-height calculation
diff --git a/packages/effects/common-ui/src/components/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue
index b9c6ba69f..c2509c838 100644
--- a/packages/effects/common-ui/src/components/page/page.vue
+++ b/packages/effects/common-ui/src/components/page/page.vue
@@ -12,7 +12,7 @@ defineOptions({
   name: 'Page',
 });
 
-const { autoContentHeight = false, heightOffset = 0 } =
+const { autoContentHeight = false, heightOffset = 0, footerFixed = false } =
   defineProps<PageProps>();
 
 const headerHeight = ref(0);
@@ -36,9 +36,12 @@ async function calcContentHeight() {
   if (!autoContentHeight) {
     return;
   }
+  shouldAutoHeight.value = false;
   await nextTick();
   headerHeight.value = headerRef.value?.offsetHeight || 0;
-  footerHeight.value = footerRef.value?.offsetHeight || 0;
+
+  footerHeight.value = footerFixed ? 0 : (footerRef.value?.offsetHeight || 0);
+
   setTimeout(() => {
     shouldAutoHeight.value = true;
   }, 30);
diff --git a/packages/effects/common-ui/src/components/page/types.ts b/packages/effects/common-ui/src/components/page/types.ts
index c7331aedf..dfebd1221 100644
--- a/packages/effects/common-ui/src/components/page/types.ts
+++ b/packages/effects/common-ui/src/components/page/types.ts
@@ -14,4 +14,10 @@ export interface PageProps {
    * @default 0
    */
   heightOffset?: number;
+  /**
+   * Whether the footer is position: fixed.
+   * When true, footer height is excluded from content height calculation.
+   * @default false
+   */
+  footerFixed?: boolean;
 }