如何让页面的footer部分位于页面底部?

本人github

要让页面的footer部分始终位于页面底部，你可以使用多种CSS布局技术。以下是一些常见的方法：

1. 使用Flexbox

你可以使用Flexbox布局来确保footer始终位于底部。

<div class="flex flex-col min-h-screen">
  <div class="flex-grow">
    <!-- 主要内容 -->
  </div>
  <footer>
    <!-- 页脚内容 -->
  </footer>
</div>

.flex-grow {
  flex-grow: 1;
}

在这个例子中，.flex-grow类使得该元素（主要内容）占用所有可用的垂直空间，从而将footer推到底部。

2. 使用Grid布局

CSS Grid也提供了一种简单的方法来实现这一目标。

<div class="grid grid-rows-layout min-h-screen">
  <main class="row-content">
    <!-- 主要内容 -->
  </main>
  <footer class="row-footer">
    <!-- 页脚内容 -->
  </footer>
</div>

.grid-rows-layout {
  grid-template-rows: 1fr auto;
}

在这里，1fr和auto分别设置主要内容和页脚的高度。1fr会占用所有可用的空间，而auto则根据内容的高度来设置。

3. 使用固定定位

如果你想让footer不仅位于页面底部，而且始终可见，你可以使用固定定位。

<footer class="fixed-bottom">
  <!-- 页脚内容 -->
</footer>

.fixed-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

这会使footer始终固定在视口的底部，而不是页面的底部。

这些只是几种可能的方法，具体实现可能因项目需求而异。如果你使用的是Tailwind CSS，你也可以使用Tailwind提供的实用程序类来实现这些布局。