如何创建无论内容高度如何都保留在页面底部的粘性页脚？

页脚定位：页面或内容底部，自适应高度

动态内容，流畅的页脚放置

在网页设计中，通常需要确保页脚位于页面或浏览器窗口的底部，无论内容长度如何。这可以通过以下方式实现：

Flexbox 解决方案

使用 Flexbox，创建粘性页脚非常简单：

1. 定义一个 Flex 容器（例如，#main-包装器），弹性方向设置为列。
2. 设置弹性容器的最小高度到 100% 以确保它跨越整个页面高度。
3. 向 Flex 容器添加一个 Flex 值大于 0 的子元素（例如，article { flex: 1; }）。这有助于垂直扩展元素并将页脚推向底部。

CSS 代码：

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

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

article {
  flex: 1;
}

以上是如何创建无论内容高度如何都保留在页面底部的粘性页脚？的详细内容。更多信息请关注PHP中文网其他相关文章！