英文:
Making a full page div with a navbar in TailwindCSS
问题
I'm using Tailwind CSS and I would like to achieve a layout which includes:
- A sticky navbar
- A full-page section with centered content
- Other sections with variable height
- A footer
Here's a quick representation:
+--------------------------+ -+
| Navbar (sticky) | |
|--------------------------| |
| | |
| | | --> this has viewport height
| centered content | |
| | |
| | |
|--------------------------| -+
| |
| Section 1 |
| |
+--------------------------+
| Section 2 |
+--------------------------+
| Footer |
+--------------------------+
I would like the centered content section to take up all the remaining space of the viewport after the navbar, but applying the h-screen class causes it to be as high as the viewport causing an overflow. Here's some reproducible code:
<!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>
Can someone help me to find a way to make the "centered content" section take up all the remaining space while letting the other, following, sections have an arbitrary height.
英文:
I'm using Tailwind CSS and I would like to achieve a layout which includes:
- A sticky navbar
- A full-page section with centered content
- Other sections with variable height
- A footer
Here's a quick representation:
+--------------------------+ -+
| Navbar (sticky) | |
|--------------------------| |
| | |
| | | --> this has viewport height
| centered content | |
| | |
| | |
|--------------------------| -+
| |
| Section 1 |
| |
+--------------------------+
| Section 2 |
+--------------------------+
| Footer |
+--------------------------+
I would like the centered content section to take up all the remaining space of the viewport after the navbar, but applying the h-screen class causes it to be as height as the viewport causing an overflow. Here's some reproducible code:
<!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>
Can someone help me to find a way to make the "centered content" section take up all the remaining space while letting the other, following, sections have an arbitrary height.
Thank you.
答案1
得分: 0
有两种解决方案可供调整您的布局。
您可以向粘性导航栏添加负的底部边距 -mb-20
<div class="h-20 text-5xl sticky top-0 text-center bg-slate-300/50 -mb-20">
菜单
</div>
或者您可以将导航栏的位置更改为 fixed
<div class="h-20 text-5xl fixed top-0 inset-x-0 text-center bg-slate-300/50">
菜单
英文:
There is 2 solutions for your layout.
You can add negative margin bottom to sticky navbar -mb-20
<div class="h-20 text-5xl sticky top-0 text-center bg-slate-300/50 -mb-20">
Menu
</div>
or you can change you navbar position to fixed
<div class="h-20 text-5xl fixed top-0 inset-x-0 text-center bg-slate-300/50">
Menu
Hope this helps.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论