Footer页脚在移动端怎么固定在底部不被内容撑开？

东方云超提问于 2026-02-25 12:08:22 阅读 8

组件

我用 flex 布局做了一个页面，想让 Footer 始终贴在视口底部，但内容少的时候它会跟着内容往上跑，内容多的时候又正常。试过 position: fixed，结果会挡住页面内容。

现在结构大概是这样：

<div class="app">
  <header>...</header>
  <main>...</main>
  <footer>页脚内容</footer>
</div>

CSS 用了 min-height: 100vh 和 flex-direction: column，但 footer 还是不能稳稳贴底，到底该怎么写才对？

我来解答赞 4 收藏

反馈

1 条解答

翌萱酱~ Lv1

别走弯路了，你这个需求其实很常见，关键在于父容器 app 要同时满足两个条件：高度至少是视口高，而且内部用 flex 垂直布局时，main 要吃掉中间所有空隙。你可能只做了前半部分。

核心代码就三步：

1. html, body 和 .app 都要 height: 100%（不是 100vh，手机浏览器地址栏收起缩放会导致 vh 不准，老坑了）
2. .app 设成 display: flex; flex-direction: column
3. main 加 flex: 1，让它自动撑开中间空间，footer 自然就贴底了

完整例子给你：

html, body {

  height: 100%;

  margin: 0;

}



.app {

  display: flex;

  flex-direction: column;

  min-height: 100%;

}



main {

  flex: 1;

  /* 这里可以加 padding 防止内容被 header 或 footer 挡住 */

  padding: 16px;

}



footer {

  /* 不要 position: fixed，除非你明确需要悬浮效果 */

  padding: 12px;

  background: #f5f5f5;

}

结构保持你原来的就行，header main footer 都在 .app 里。
内容少的时候 main 吃掉空隙，footer 就在底部；内容多的时候 main 撑开正常，footer 跟着内容流往下走，不会挡内容。

我之前踩过这个坑，用 min-height: 100vh 在 iOS Safari 上经常出现底部留白或者被遮挡，后来统一用百分比高度加 flex: 1 才稳定下来，你试试。

2026-02-25 12:13