📅 最后修改于: 2023-12-03 15:08:24.304000 🧑 作者: Mango
如果你希望在底部创建一个固定粘性页脚，可以使用 Tailwind CSS 来实现。下面是一些步骤和示例代码来帮助你达成目标。
添加 Tailwind CSS 到你的项目中。
你可以在 Tailwind 官网 中找到安装方法。这里展示一下使用 npm 安装的方法：
npm install tailwindcss
在 HTML 文件中添加页脚结构。
<footer class="pb-6 bg-gray-900 text-gray-200">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between">
<div class="w-full md:w-auto md:order-2 text-sm text-gray-500 mt-2 md:mt-0">
© 2021 Tailwind CSS
</div>
<div class="w-full md:w-auto md:order-1">
<ul class="flex text-sm font-medium">
<li class="mr-6">
<a href="#" class="text-gray-500 hover:text-gray-200">Home</a>
</li>
<li class="mr-6">
<a href="#" class="text-gray-500 hover:text-gray-200">About</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-200">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
在这个例子中，页脚分成了两部分：左侧的版权信息和右侧的菜单。
在 CSS 文件中添加样式。
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
这段 CSS 代码为 body 元素添加了 min-height: 100vh 和 display: flex 样式，使其高度至少占据整个视口，而不是单纯的按页面内容的高度。main 元素被添加了 flex: 1 样式，使其与页脚之间留有一些空隙。
给页脚添加样式。
footer {
position: sticky;
bottom: 0;
z-index: 50;
}
这段 CSS 代码将页脚定位在页面底部，并且使它具有“粘性”，在滚动时保持在底部。z-index 在这里设置为 50，是为了确保它在其他元素之上。
执行构建命令。
如果你使用的是 Tailwind CLI 工具，可以执行以下命令：
npx tailwindcss build -o css/tailwind.css
如果你使用的是其他工具或框架，请查阅它们的文档以了解如何执行构建命令。
下面是完整的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tailwind CSS Sticky Footer</title>
<link rel="stylesheet" href="css/tailwind.css">
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
footer {
position: sticky;
bottom: 0;
z-index: 50;
}
</style>
</head>
<body>
<main class="bg-gray-100 container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4">Main Content</h1>
<p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet urna euismod, commodo elit id, mollis quam. Nunc nec elit sem. Quisque mattis interdum ipsum, eu vestibulum lorem bibendum id.</p>
</main>
<footer class="pb-6 bg-gray-900 text-gray-200">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between">
<div class="w-full md:w-auto md:order-2 text-sm text-gray-500 mt-2 md:mt-0">
© 2021 Tailwind CSS
</div>
<div class="w-full md:w-auto md:order-1">
<ul class="flex text-sm font-medium">
<li class="mr-6">
<a href="#" class="text-gray-500 hover:text-gray-200">Home</a>
</li>
<li class="mr-6">
<a href="#" class="text-gray-500 hover:text-gray-200">About</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-200">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
返回的 Markdown：
# 如何使用 Tailwind CSS 在底部创建固定粘性页脚？
如果你希望在底部创建一个固定粘性页脚，可以使用 Tailwind CSS 来实现。下面是一些步骤和示例代码来帮助你达成目标。
## 步骤
1. 添加 Tailwind CSS 到你的项目中。
你可以在 [Tailwind 官网](https://tailwindcss.com/docs/installation) 中找到安装方法。这里展示一下使用 npm 安装的方法：
```sh
npm install tailwindcss
```
2. 在 HTML 文件中添加页脚结构。
```html
<footer class="pb-6 bg-gray-900 text-gray-200">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between">
<div class="w-full md:w-auto md:order-2 text-sm text-gray-500 mt-2 md:mt-0">
© 2021 Tailwind CSS
</div>
<div class="w-full md:w-auto md:order-1">
<ul class="flex text-sm font-medium">
<li class="mr-6">
<a href="#" class="text-gray-500 hover:text-gray-200">Home</a>
</li>
<li class="mr-6">
<a href="#" class="text-gray-500 hover:text-gray-200">About</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-200">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
```
在这个例子中，页脚分成了两部分：左侧的版权信息和右侧的菜单。
3. 在 CSS 文件中添加样式。
```css
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
```
这段 CSS 代码为 `body` 元素添加了 `min-height: 100vh` 和 `display: flex` 样式，使其高度至少占据整个视口，而不是单纯的按页面内容的高度。`main` 元素被添加了 `flex: 1` 样式，使其与页脚之间留有一些空隙。
4. 给页脚添加样式。
```css
footer {
position: sticky;
bottom: 0;
z-index: 50;
}
```
这段 CSS 代码将页脚定位在页面底部，并且使它具有“粘性”，在滚动时保持在底部。`z-index` 在这里设置为 50，是为了确保它在其他元素之上。
5. 执行构建命令。
如果你使用的是 Tailwind CLI 工具，可以执行以下命令：
```sh
npx tailwindcss build -o css/tailwind.css
```
如果你使用的是其他工具或框架，请查阅它们的文档以了解如何执行构建命令。
## 示例代码
下面是完整的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tailwind CSS Sticky Footer</title>
<link rel="stylesheet" href="css/tailwind.css">
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
footer {
position: sticky;
bottom: 0;
z-index: 50;
}
</style>
</head>
<body>
<main class="bg-gray-100 container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4">Main Content</h1>
<p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet urna euismod, commodo elit id, mollis quam. Nunc nec elit sem. Quisque mattis interdum ipsum, eu vestibulum lorem bibendum id.</p>
</main>
<footer class="pb-6 bg-gray-900 text-gray-200">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between">
<div class="w-full md:w-auto md:order-2 text-sm text-gray-500 mt-2 md:mt-0">
© 2021 Tailwind CSS
</div>
<div class="w-full md:w-auto md:order-1">
<ul class="flex text-sm font-medium">
<li class="mr-6">
<a href="#" class="text-gray-500 hover:text-gray-200">Home</a>
</li>
<li class="mr-6">
<a href="#" class="text-gray-500 hover:text-gray-200">About</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-200">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>