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

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

组件

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

现在结构大概是这样：

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

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

我来解答赞 6 收藏

反馈

2 条解答

开发者新红 Lv1

哈！这个坑我之前也踩过，flex布局搞footer贴底确实有点小麻烦。你的思路其实已经挺接近了，我来告诉你一个可靠的做法：

给.app加上min-height: 100vh的flex布局是对的，但关键是要让main自动撑开。这样写就能完美解决：

.app {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}

main {

  flex: 1;

}

footer {

  /* 这里可以加你的footer样式 */

}

原理很简单：main的flex:1会让它自动占据剩余空间，这样内容少的时候footer就能被"撑"到底部，内容多的时候它也会正常往下走。比用fixed靠谱多了，不会遮挡内容。

我有个项目上周还在调这个，实测这个写法在各种移动设备上都表现良好。要是还有问题的话，可以看看是不是其他地方覆盖了这些样式。

2026-03-07 14:10

翌萱酱~ 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