如何创建保留在页面或内容底部（以较低者为准）的粘性页脚？

页脚位于页面底部或内容底部，以较低者为准

简介

在 Web 开发中，至关重要确保网页上元素的正确定位，尤其是在处理动态内容时。一个常见的挑战是实现保留在页面或内容底部的页脚，具体取决于哪个较低。

问题陈述

提供的 HTML 结构包括包含页眉、导航、文章和页脚的父包装元素 (#main-wrapper)。挑战是根据文章元素内的内容高度动态调整页脚的位置。当内容充足时，页脚应粘在页面底部，但当内容有限时，页脚应移至浏览器窗口的底部。

Flexbox 解决方案

一个强大的解决方案解决这个问题的现代方法是利用 Flexbox。 Flexbox 提供了一个多功能的布局系统，可以简化容器内元素的定位和对齐。通过利用flexbox垂直对齐元素的能力，我们可以实现所需的粘性页脚行为。

CSS代码

以下CSS代码使用flexbox来实现粘性页脚footer:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

在此设置中，#main-wrapper 元素是 Flexbox 容器，它将 flex-direction 设置为 column，这意味着元素将垂直堆叠。 Article 元素具有 flex: 1，这使得它占据了标题和导航未占用的剩余空间。

当文章内有足够的内容时，它会增长以将页脚向下推，将其定位在页面底部。但是，当内容有限时，文章会缩小，页脚会动态移动到浏览器窗口的底部，因为 #main-wrapper 元素的最小高度确保它始终填充视口。

以上是如何创建保留在页面或内容底部（以较低者为准）的粘性页脚？的详细内容。更多信息请关注PHP中文网其他相关文章！