技术需求：实现动态页脚，固定于页面底部且随内容自动下移

这问题我太熟了！要实现固定在页面底部，内容多了能自动往下适配的页脚，目前有两种靠谱的方案，我都给你整理好了：

方案一：CSS Flexbox 实现（首推！） #

这是现在最简洁也最灵活的方法，兼容性拉满（IE11及以上都支持），核心思路是把页面整体设为垂直方向的Flex布局，让主内容区域自动填充剩余空间，页脚自然就被“挤”到底部——内容短的时候固定在视口底部，内容长的时候就跟着页面滚到底部。

直接上可复用的代码：

HTML 结构 #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 下面的CSS代码放这里 */
  </style>
</head>
<body>
  <header>页面头部导航</header>
  <main>这里是页面的主要内容，随便加多少内容都没问题～</main>
  <footer>我是页脚，会乖乖待在最底部！</footer>
</body>
</html>

CSS 样式 #

/* 先重置浏览器默认的边距和内边距，避免布局乱掉 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让html和body占满整个视口高度 */
html, body {
  height: 100%;
}

/* 把body设置成垂直方向的Flex容器 */
body {
  display: flex;
  flex-direction: column;
}

/* 关键：让主内容区域自动填充剩余的所有空间 */
main {
  flex: 1;
  /* 可选：给内容加个内边距，避免贴边 */
  padding: 2rem;
}

/* 自定义页脚样式，随便改 */
footer {
  background-color: #f5f5f5;
  padding: 1.5rem;
  text-align: center;
  border-top: 1px solid #eee;
}

这个方案的好处就是不用算高度，哪怕页脚内容换行变高也能自动适配，完全不用操心。

方案二：传统固定高度法（兼容旧浏览器） #

如果你的项目需要兼容IE8这类老浏览器，那可以用这个方法。核心是给页脚设固定高度，然后让内容容器的最小高度等于视口高度减去页脚高度，再用一个占位元素抵消负margin的影响。

HTML 结构 #

<body>
  <div class="content-wrapper">
    <header>页面头部</header>
    <main>这里是主要内容区域</main>
    <div class="footer-push"></div> <!-- 这个占位元素必须要有！ -->
  </div>
  <footer>固定高度的页脚</footer>
</body>

CSS 样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

/* 内容容器的最小高度是视口高度减去页脚高度 */
.content-wrapper {
  min-height: 100%;
  margin-bottom: -60px; /* 这个值要和页脚的height完全一致 */
}

/* 占位元素，抵消上面的负margin */
.footer-push {
  height: 60px; /* 和页脚高度相同 */
}

/* 固定页脚高度 */
footer {
  height: 60px;
  background-color: #f5f5f5;
  padding: 1.5rem;
  text-align: center;
  border-top: 1px solid #eee;
}

这个方法的缺点是必须固定页脚高度，如果页脚内容可能动态变化（比如多语言切换换行），就不太适用了。

最后提醒 #

不管用哪种方案，一定要先重置默认的margin和padding，不然浏览器自带的样式会打乱你的布局哦～

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