diff --git a/.changeset/page-auto-content-height.md b/.changeset/page-auto-content-height.md new file mode 100644 index 00000000..94b81cc9 --- /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 b9c6ba69..c2509c83 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(); 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 c7331aed..dfebd122 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; }