如何让Footer始终位于页面内容下方？窗口高度变化不偏移

兄弟，我太懂这种踩坑的感觉了！之前我也折腾了好久才搞定这个问题——要么Footer在内容短的时候飘在视口中间，要么窗口一缩小就把内容盖住。给你几个亲测有效的方案，都是现在主流的解决办法：

这是目前最常用的方案，兼容性也很好，只要你的项目不用兼容IE9及以下都可以用。核心思路是把页面根容器设置成flex布局，让主内容区自动占满剩余空间，Footer自然就会被挤到最下面。

代码示例：

/* 先给根元素设置基础样式 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 确保页面至少占满整个视口高度 */
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
  color: white;
  font-family: raleway;
  background-color: black;
}

.nav-bar {
  background-color: black;
  height: 50px;
}

.main-content {
  flex: 1; /* 关键属性！让内容区自动填充导航栏和Footer之外的所有剩余空间 */
  padding: 20px; /* 加个内边距避免内容贴边 */
}

.footer {
  background-color: black;
  height: 60px; /* 按需设置Footer高度 */
}

不管内容多少，这个方案都能保证：内容短的时候Footer固定在视口底部；内容超过视口高度时，页面正常滚动，Footer会跟着到所有内容的最下方，绝对不会覆盖内容。

如果你项目里已经在用Grid布局，这个方案同样简洁高效，逻辑和Flexbox类似：

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: grid;
  /* 直接定义三行的高度分配：导航栏自适应、内容区占剩余、Footer自适应 */
  grid-template-rows: auto 1fr auto;
  color: white;
  font-family: raleway;
  background-color: black;
}

.nav-bar {
  background-color: black;
  height: 50px;
}

.main-content {
  padding: 20px;
}

.footer {
  background-color: black;
  height: 60px;
}

1fr是Grid的核心属性，代表“剩余空间的1份”，完美实现内容区填充空白、Footer固定底部的效果。

如果你的项目需要兼容IE9这种老浏览器，可以试试这个方法，核心是用负margin来调整Footer位置：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: white;
  font-family: raleway;
  background-color: black;
}

.wrapper {
  min-height: 100%;
  margin-bottom: -60px; /* 数值等于Footer的高度 */
}

.nav-bar {
  background-color: black;
  height: 50px;
}

.main-content {
  padding: 20px;
}

/* 需要额外加一个push元素抵消负margin的影响 */
.footer, .push {
  height: 60px;
  background-color: black;
}

对应的HTML结构要调整一下：

<div class="wrapper">
  <div class="nav-bar"></div>
  <div class="main-content">你的页面内容</div>
  <div class="push"></div>
</div>
<div class="footer"></div>

你之前的方案没生效，大概率是没给html/body设置正确的高度，或者没让内容区占据剩余空间。把上面的代码替换进去试试，应该就能解决问题了！

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