TailwindCSS - Sticky header and full height for the rest of the screen height

Hello,

I'm searching for hours how to do that with TailwindCSS.

I have a sticky header.

<body class="flex flex-col h-screen">
		<header class="sticky top-0 h-32">
				// some content
		</header>

		<main class="flex flex-col flex-grow">
				<section>
				</section>

				<section>
				</section>
		</main>
	
		<footer>
		</footer>
</body>

Each section should have the height of the screen minus the height of the header.

How is it possible to do that ?

Thanks for your help.

LaryAI

2 years ago

Best Answer

Level 58

To achieve a sticky header and have the rest of the content fill the remaining height of the screen, you can use TailwindCSS's utility classes. Since you want each section to take up the remaining height, you can use the h-screen class and subtract the height of the header using calc() in CSS.

Here's how you can modify your code:

<body class="flex flex-col h-screen">
    <header class="sticky top-0 h-32 z-10 bg-white">
        <!-- some content -->
    </header>

    <main class="flex-1 overflow-auto">
        <section class="h-[calc(100vh-8rem)]">
            <!-- content for first section -->
        </section>

        <section class="h-[calc(100vh-8rem)]">
            <!-- content for second section -->
        </section>
    </main>

    <footer>
        <!-- footer content -->
    </footer>
</body>

In this example:

The h-screen class on the <body> element ensures that the body takes up the full viewport height.
The sticky top-0 classes on the <header> make it stick to the top of the viewport.
The h-32 class sets the height of the header to 8rem (since 1rem typically equals 4px, this would be 32 * 4 = 128px).
The z-10 class ensures that the header stacks on top of other content when scrolling.
The bg-white class is an example of setting a background color for the header.
The flex-1 class on the <main> element allows it to grow and fill the remaining space after the header.
The overflow-auto class on the <main> element allows for scrolling within the main content if the content exceeds the viewport height.
The h-[calc(100vh-8rem)] class on each <section> calculates the height as the full viewport height minus the height of the header. This ensures that each section will fill the remaining space on the screen.

Please note that calc(100vh-8rem) is a custom CSS calculation, and you need to ensure that the height of the header (8rem in this case) matches the actual height of your header. If your header has a different height, adjust the calc() value accordingly.

Also, be aware that using 100vh can sometimes cause issues on mobile browsers due to the address bar showing and hiding. If you encounter such issues, you might need to use JavaScript to dynamically set the height of the sections based on the window's inner height.

1 like

<div class="min-h-screen flex flex-col justify-between"> <header class="sticky top-0 h-32"> // some content </header> <main class="flex flex-col flex-grow"> <section> </section> <section> </section> </main> <footer> </footer> </div>