How can I make a Hero section fill the remaining viewport height below a header in Nuxt 4 without breaking when the page grows?

I am currently building a website using Nuxt 4 + Tailwind CSS and I am having a problem with viewport units (dvh, vh) and percentage heights (h-full) inside a Nuxt layout.

My layout structure is basically:

A global default.vue layout

A Header and a main inside it

Multiple sections rendered inside index the page (Hero, OurTechnologies, etc.), where it uses the default layout

The layout currently looks like this:

<template> <div class="min-h-dvh grid grid-rows-[auto_1fr]"> <LayoutHeader /> <main> <slot /> </main> </div> </template>

The index.vue:

<template> <LayoutSectionsHomeHero /> <LayoutSectionsSeparator /> <LayoutSectionsHomeOurTechnologies /> </template>

The HeroSection.vue:

<template> <section class="homeHero__main-section h-full flex flex-col items-center justify-center" > <h1 class="homeHero__main-title title__default text-center"> Welcome to <br /> <span class="gradient__text bg-linear-green-1"> <span class="mt-5 inline-block">AutoAI</span> <span class="hidden sm:inline"> - </span> <br class="sm:hidden" /> <span>Pandemics</span> </span> </h1> <p class="homeHero__welcome-paragraph text__default mt-5 text-center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <div class="homeHero__buttons-container mt-10 flex w-full flex-col gap-5"> <UiButtonsPrimary class="font-header-text"> Explore our technologies </UiButtonsPrimary> <UiButtonsSecondary class="font-header-text"> About us </UiButtonsSecondary> </div> </section> </template>

And finally, the OurTechnologiesSection.vue

<template> <section class="homeOurTechnologies__main-section flex flex-col items-center"> <UiCardsTool v-for="item in tools" :toolName="item.toolName" :toolDescription="item.toolDescription" :toolLink="item.toolLink" ></UiCardsTool> </section> </template> <script setup lang="ts"> const tools = [ { toolName: "Test", toolDescription: "This is test", toolLink: "/" }, { toolName: "Test", toolDescription: "This is test", toolLink: "/" }, { toolName: "Test", toolDescription: "This is test", toolLink: "/" }, { toolName: "Test", toolDescription: "This is test", toolLink: "/" }, ]; </script>

The problem is:

If the page only contains the Hero section, everything works perfectly. Check the image below

Layout without OurTechnologies Section working perfectly

The Hero fills the remaining viewport space below the header exactly as expected.

But as soon as I add another section below it (OurTechnologies), the Hero suddenly becomes much taller than the viewport, like the image below:

Layout broken with OurTechnologies Section

Because of this:

justify-center starts centering based on the entire page height instead of only the visible screen.

The Hero content gets pushed down vertically.

The selected element in DevTools becomes much taller than the viewport.

What I want is a hero section that always fills exactly the visible viewport area remaining below the header(like you can see in the first image above) using best practices for responsive layout.

Oh, and I also tried:

h-full

min-h-full

h-dvh

min-h-dvh

CSS calc()

Changing Grid/Flex configurations

In the hero section, but the behavior still breaks once the page grows vertically.

*Just a small note: Feel free to give me feedback about Vue, HTML, CSS, and best practices. I’m currently starting my journey in front-end development, and I want to learn as much as I can about this huge area, and sorry for my english :)