CSS容器高度变化时如何让Footer始终处于底部（非Fixed定位）

原始问题代码 #

#container
{
position:relative;
width:100%;
min-height:450px;
background-color:#ddd;
margin:auto;
overflow:hidden;
}


#footer
{
position:absolute;
width:100%;
height:150px;
left:50%;
margin-left:-50%;
background-color:#111;
bottom:0px;
}

<div id="container"></div>
<div id="footer"></div>

当前代码的核心问题：footer通过绝对定位脱离了文档流，容器内容增多时会直接和footer重叠，无法实现「内容少居底、内容多时跟随容器」的需求。

推荐解决方案：Flexbox布局 #

这是目前最简洁可靠的实现方式，兼容性覆盖绝大多数现代浏览器：

html, body {
  height: 100%;
  margin: 0; /* 清除浏览器默认边距 */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保body至少占满整个视口高度 */
}

#container {
  width: 100%;
  min-height: 450px; /* 保留你需求中的最小高度 */
  background-color: #ddd;
  margin: auto;
  flex: 1; /* 关键：让容器自动占据body的剩余空间 */
}

#footer {
  width: 100%;
  height: 150px;
  background-color: #111;
}

<div id="container">
  <!-- 动态内容直接放在这里即可 -->
</div>
<div id="footer"></div>

备选方案：Grid布局 #

如果更熟悉Grid语法，也可以用这种方式实现：

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行占满剩余空间，第二行自适应footer高度 */
  min-height: 100vh;
}

#container {
  width: 100%;
  min-height: 450px;
  background-color: #ddd;
  margin: auto;
}

#footer {
  width: 100%;
  height: 150px;
  background-color: #111;
}

这两种方案都能完美满足需求：

• 容器内容较少时，footer自动固定在视口底部
• 容器内容增多时，footer被容器内容挤到页面下方，不会出现重叠
• 全程无需使用fixed定位，完全基于正常文档流布局

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