使用 Tailwind CSS 的粘性页脚
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我几个月前开始尝试使用 Tailwind CSS，非常喜欢它。我的目标是最终在我的网站上使用 Tailwind CSS。
通常，我喜欢将我的 HTML 页面布局在语义上分为以下几个部分：header，main和footer。
<body>
<header>
Navigation bar
</header>
<main>
Page content
</main>
<footer>
Social links
</footer>
</body>
为了使该footer部分保持在浏览器窗口的底部，我们需要添加 Tailwind CSS 提供的 flexbox 实用类，如下所示。
<body class="flex flex-col min-h-screen ">
<header>
Navigation bar
</header>
<main class="flex-grow">
Page content
</main>
<footer>
Social links
</footer>
</body>
实用类
-
.flex
这会将body元素放入弹性容器中。该body元素的所有直接子元素都将成为弹性项目。 -
.flex-col
这定义了弹性项目的方向；即 `<flex-items>`header、` <flex-link>` 和 `<flex-link> `。 我们希望页面布局类似于一列，弹性项目从上到下排列。 默认情况下，Flexbox 会将弹性项目水平排列成一行，从左到右。mainfooter -
.min-h-screen
此类确保布局占据浏览器窗口的全部高度。 -
.flex-grow
添加此类后，main元素会扩展，占据屏幕上所有可用空间。可用空间等于弹性容器的大小，减去弹性项目和body元素的总和。headerfooter
使用纯 CSS 和 flexbox 将页脚固定在底部。
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1; /* Or flex-grow: 1;*/
}