100vh content centered, except header and footer

[unborn jackal]

What's the best way to have a page with fixed header and footer and the actual content to take all the remaining space and vertically center the content?

i tried something like this

<AppShell
    padding={0}
    fixed={true}
    style={{ minHeight: '100vh' }}
    header={...}
    footer={...}>
    <Box style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        {children}
    </Box>
</AppShell>

And then have something on the page like

        <Stack
            justify="center"
            px={16}
            style={{ width: '100%' }}>
            ...
        </Stack>

But I didn't get it to work

[lime hawk]

I've been wondering this as well. I had a pretty elegant solution in v6, but in v7 child elements of <AppShell.Main> with 100% height no longer fill the entire space within.

Following up... I'm not sure if this is the best approach, but the min-height of <AppShell.Main> is set to 100dvh by default. Explicitly setting the height to 100dvh as well seems to work for me. Typically, the height of a parent element needs to be specified for a child element's height to fill it, even when the child's height is set to 100%.