I am currently utilizing Tailwind CSS and in need of creating a layout that consists of:
- A sticky navigation bar
- A full-page section with content centered
- Other sections with varying heights
- A footer
Below is a simple representation:
+--------------------------+ -+
| Navbar (sticky) | |
|--------------------------| |
| | |
| | | --> this extends to viewport
| centered content | |
| | |
| | |
|--------------------------| -+
| |
| Section 1 |
| |
+--------------------------+
| Section 2 |
+--------------------------+
| Footer |
+--------------------------+
I want the centered content section to occupy all available space after navbar, but using the h-screen class causes it to overflow due to being equal to viewport height. Below is some code for reference:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
</style>
</head>
<body>
<div class="h-20 text-5xl sticky top-0 text-center bg-slate-300/50">
Menu
</div>
<div class="h-screen mx-auto bg-indigo-300 flex flex-col justify-center items-center text-5xl">
content
</div>
<div class="h-80 mx-auto bg-green-300 flex flex-col justify-center items-center text-5xl">
content
</div>
<div class="h-20 mx-auto bg-black text-white flex flex-col justify-center items-center text-5xl">
footer
</div>
</body>
</html>
If anyone has a solution on how I can make the "centered content" section fill up the remaining space while allowing other sections to have different heights, please share your input.
Thank you.