我正在使用顺风CSS，我想实现一个布局，其中包括：
- 粘性导航栏
- 内容居中的整页节
- 高度可变的其他型材
- 页脚
下面是一个简单的演示：
+--------------------------+ -+
| Navbar (sticky) | |
|--------------------------| |
| | |
| | | --> this has viewport height
| centered content | |
| | |
| | |
|--------------------------| -+
| |
| Section 1 |
| |
+--------------------------+
| Section 2 |
+--------------------------+
| Footer |
+--------------------------+我希望居中的内容部分占据导航栏之后的所有剩余空间，但是应用 * h-screen * 类会导致它与视口一样高，从而导致溢出。
<!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>有人能帮我找到一种方法，使"居中的内容"部分占据所有剩余的空间，而让其他，以下，部分有一个任意的高度。
谢谢你。
1条答案
按热度按时间omqzjyyz1#
您的布局有两种解决方案。
您可以将负边距底部添加到粘性导航栏
-mb-20或者您可以将导航栏位置更改为
fixed希望这个有用。