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>
master^2
Akuria 2026-05-16 10:43:10 +08:00 committed by GitHub
parent f55b18ffd7
commit 294700a247
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 16 additions and 2 deletions

View File

@ -0,0 +1,5 @@
---
"@vben/common-ui": patch
---
fix: skip fixed footer height in auto-content-height calculation

View File

@ -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);

View File

@ -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;
}