让你告别烦恼！CSS脚部元素“吸底”详细教程来了

2024-01-07 15:33:03

前言

在网页设计中，页脚元素通常位于页面底部，用以放置版权信息、联系方式或其他重要信息。为了提升用户体验，我们希望页脚元素始终位于可视窗口底部，即使在内容较少的情况下也不例外。同时，当内容较多时，页脚元素还能随着内容区增高而撑开，始终显示在页面的最底部。这种效果我们称之为“吸底”效果。

实现方法一：绝对定位

<footer class="footer">
  <div class="footer-content">
    <!-- 页脚内容 -->
  </div>
</footer>

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.footer-content {
  padding: 1rem;
  background-color: #333;
  color: #fff;
}

这种方法简单易行，但存在一个问题：当内容较少时，页脚元素会覆盖内容区，导致内容无法滚动。为了解决这个问题，我们需要在页脚元素上添加一个负边距，使其不会覆盖内容区。

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-top: -100px; /* 添加负边距 */
}

这样，页脚元素就不会覆盖内容区了，但它仍然会固定在可视窗口底部。当内容较多时，页脚元素会随着内容区增高而撑开，始终显示在页面的最底部。

实现方法二：flex 布局

<footer class="footer">
  <div class="footer-content">
    <!-- 页脚内容 -->
  </div>
</footer>

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100vh; /* 容器高度设置为 100% 视口高度 */
}

.footer-content {
  padding: 1rem;
  background-color: #333;
  color: #fff;
  width: 100%; /* 宽度设置为 100% */
}

这种方法利用 flex 布局实现了“吸底”效果。首先，我们将页脚元素设置为 flex 容器，并设置 flex-direction: column，使其成为一个垂直排列的容器。然后，我们将 align-items: center 和 justify-content: flex-end，使页脚元素的内容水平居中、垂直底部对齐。最后，我们将容器的高度设置为 100% 视口高度，这样页脚元素就会撑开整个容器，始终显示在页面的最底部。