首页 >web前端 >css教程 >如何创建无论内容高度如何都保留在页面底部的粘性页脚?

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

Linda Hamilton
Linda Hamilton原创
2024-12-23 09:00:361028浏览

How Can I Create a Sticky Footer That Remains at the Bottom of the Page Regardless of Content Height?

页脚定位:页面或内容底部,自适应高度

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

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

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn