移动端页面Footer始终置于底部的实现方案求助

下面给出几种可靠的实现方案，解决你遇到的absolute无效、fixed悬浮的问题：

方法一：Flexbox 布局（推荐） #

这是目前最简洁且兼容性良好的方案，核心是利用flex的flex: 1让主内容区域自动占满剩余空间，把footer挤到底部。

HTML结构：

<body>
  <header>页面头部</header>
  <main>页面主内容</main>
  <footer>页面底部</footer>
</body>

CSS代码：

html, body {
  height: 100%; /* 让根元素占满视口高度 */
  margin: 0;
}
body {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}
main {
  flex: 1; /* 主内容区域自动填充剩余空间 */
}
footer {
  background: #eee;
  padding: 1rem;
}

方法二：Grid 布局 #

利用CSS Grid的grid-template-rows属性，精准分配各区域高度，让主内容区域占满剩余空间。

HTML结构与上方一致，CSS代码：

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 头部自适应高度，主内容占满剩余，底部自适应 */
}
footer {
  background: #eee;
  padding: 1rem;
}

方法三：传统负边距方案（兼容旧浏览器） #

如果需要兼容IE9及更早版本，可采用此方案：通过给主内容容器设置等于footer高度的内边距，再给footer设置负外边距，实现“占位+拉回”的效果。

HTML结构：

<div class="wrapper">
  <header>页面头部</header>
  <main>页面主内容</main>
</div>
<footer>页面底部</footer>

CSS代码：

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  padding-bottom: 60px; /* 值等于footer的高度 */
  box-sizing: border-box; /* 让内边距包含在容器高度内 */
}
footer {
  height: 60px; /* 固定footer高度 */
  margin-top: -60px; /* 负边距将footer拉回占位区域 */
  background: #eee;
  padding: 1rem;
}

补充说明 #

你之前用position: absolute无效，大概率是未给父元素（如body或html）设置position: relative和height: 100%，但这种方案在内容超过视口高度时，footer会覆盖内容，因此不推荐使用。

内容的提问来源于stack exchange，提问作者Kas