粘页脚

最新推荐文章于 2026-07-01 20:04:56 发布

翻译最新推荐文章于 2026-07-01 20:04:56 发布 · 160 阅读

本文介绍了一种使用CSS实现粘性页脚的方法，确保页脚始终处于屏幕底部，即使内容高度变化也能保持位置不变。通过设置.page-wrap和.site-footer的特定样式，实现了响应式布局下的粘性页脚效果。

如果可以对页脚应用固定的高度，则效果很好。

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

见笔粘页脚克里斯Coyier（ @chriscoyier上） CodePen 。