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

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

当

中动态加载内容的高度超过部分有所不同，它可能会产生一个令人困惑的问题：如何才能显示出来？部分保持在可见内容的底部，同时也符合浏览器窗口的下边界？

Flexbox 版本

对于那些使用 Flexbox 的优势的人来说，实现这种粘性页脚是一件很简单的事情蛋糕。通过使用高度拉伸包装器将所有元素封装在 Flex 容器中，页脚可以轻松适应动态内容。

只需使用 display: flex 和 flex-direction: column 配置包装器元素即可。然后，分配至少一个 flex 值超过 0 的同级元素，例如：

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

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

article {
  flex: 1;
}

Html 标记：

<div>

这种方法有效地将页脚粘合到底部当内容较短时浏览器窗口，并动态调整其位置以匹配较长内容的高度。

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