Nuxt•5mo ago

Workaround for NuxtPage not updating size of parent elements leading to overflow

I currently have a page that needs a header, footer, and main content area. in order keep the header to the bottom when the page content is smaller than the header, i have tried to use a grid and a flexbox. both work when the content is smaller than the content's container, however with larger content the content just overflows the container instead of updating it's size. the page is just the standard

<NuxtLayout>
    <NuxtPage />
</NuxtLayout>

<NuxtLayout>
    <NuxtPage />
</NuxtLayout>

so i am not sure how to make the NuxtPage update the size of the parent object for the layout's <slot/>, if anyone has any ideas i am all ears-

1 Reply

WinterSys•5mo ago

i would just sticky the footer but i'd rather it stay below the content when it is long enough to be the element does expand properly if i put the content inside the template itself. i would be curious if the issue is tailwind's grids not liking dynamic content deleting/adding items manually in the page still updates the size so it is definitely a nuxt and/or vue issue not an ssr issue as it happens with it on and off nevermind, issue seems to be that i was using a <main> tag which would not affect the size of the parent <div> instead just overflowing however replacing <main> with <div> seems to fix it and i am wrong again the entire issue was a single position absolute tag css is annoying :Facepalm:

Gaming

Programming

Workaround for NuxtPage not updating size of parent elements leading to overflow