CSS - sticky footer

最新推荐文章于 2025-05-08 19:12:41 发布

jnChen10

最新推荐文章于 2025-05-08 19:12:41 发布

阅读量229

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/sinat_33184880/article/details/100609225

CSS 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了两种实现StickyFooter布局的方法：一种是通过min-height、padding-bottom和margin-top属性组合，另一种是利用Flex布局特性。这两种方法都能确保当内容不足一屏时，页脚固定在屏幕底部；当内容超过一屏时，页脚紧随内容之后。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sticky footer是一种布局解决方案，规定屏幕内容在占满一屏幕 / 未占不满一屏幕的情况下，footer出现的位置

内容未超过一屏幕的高度时，footer至于屏幕最下方

内容超过一屏幕的高度时，footer至于内容的下方

两种常见的解决方案

1.使用min-height、padding-bottom、margin-top

* {
 margin: 0;
 padding: 0;
 text-align: center;
}
html, body {
  height: 100%;
}
body > .wrap {
  min-height: 100%;
  background: lightblue;
}
.content {
  /* padding-bottom 等于 footer 的高度 */
  padding-bottom: 30px; 
}
.footer {
  /* margin-top 为 footer 高度的负值 */
  margin-top: -30px; 
  width: 100%;
  height: 30px;
  background: gray;
}

<div class="wrap">
  <div class="content">
    <p>填充内容</p>
  </div>
</div>
<div class="footer">
  <p>这是页脚</p>
</div>

2.flex布局

* {
 margin: 0;
 padding: 0;
 text-align: center;
}
html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}
body .content {
  flex: 1;
  background: lightblue;
}

<div class="content">
  <p>填充内容</p>
</div>
<div class="footer">
  <p>这是页脚</p>
</div>