Best practices on handling content height with an app that has a header / footer component

[fading estuary]

Hello all,

For my nuxt pages I am using a layout with the following pattern

<template>
  <div>
    <NavBar />
      <NuxtPage />
    <Footer />
  </div>
</template>

<script setup>
import NavBar from '~/components/NavigationBar.vue'
import Footer from '~/components/Footer.vue'
</script>

I would like to achieve a situation where the height of all <NuxtPage/> components will by default take up the remaining vertical height of the viewport (minus the navbar/footer) height. Is there a best practice on how to setup page components to do that or some other pattern?

[safe nimbus]

flex + flex-grow flex-nogrow 🙂

[fading estuary]

@safe nimbus which element would you put that on?

[crystal pond]

Like this

<template>
  <div id="layout-default" class="flex min-h-dvh flex-col">
    <TheHeader />

    <main class="grow">
      <slot />
    </main>

    <TheFooter />
  </div>
</template>

[ripe galleon]

In case you're wondering, dvh is great because it makes room for smartphone task bars. I saw Muhammad mention a solution using min-h-dvh and I thought I'd point it out so it was clear what it did. 👍