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

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

Linda Hamilton
发布: 2024-12-23 09:00:36
原创
1028 人浏览过

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
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板