基于Flexbox布局实现非body直接子元素的footer固定在底部

针对你带侧边栏的页面结构，只需调整几个Flexbox属性就能实现Footer固定在底部的效果，核心是让外层容器撑满视口高度，同时让主内容区域占据剩余空间。

修改后的完整代码 #

CSS部分

body {
  margin: 0; /* 清除浏览器默认边距，避免不必要的滚动条或留白 */
  min-height: 100vh; /* 确保body至少占满整个视口高度 */
  display: flex;
  flex-direction: column; /* 垂直排列body的子元素 */
}

#outer-container {
  display: flex;
  flex-grow: 1; /* 让外层容器撑满body的剩余垂直空间 */
}

#inner-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column; /* 垂直排列主内容和Footer */
}

main {
  flex-grow: 1; /* 主内容区域占据inner-container的所有剩余垂直空间，将Footer推到底部 */
}

footer {
  /* 可选样式：增强Footer视觉效果 */
  background-color: #f0f0f0;
  padding: 1.2rem;
}

HTML部分（无需修改）

<body>
  <div id="outer-container">
    <aside>ASIDE</aside>
    <div id="inner-container">
      <main>MAIN</main>
      <footer>FOOTER</footer>
    </div>
  </div>
</body>

原理说明 #

1. body层设置：通过min-height:100vh让页面基础高度覆盖视口，同时用flex-direction:column垂直布局，确保外层容器能填充剩余高度。
2. outer-container层：flex-grow:1让它撑满body的垂直空间，而不是仅包裹内部的侧边栏和主内容区域。
3. inner-container层：保持原有的垂直flex布局，给main添加flex-grow:1后，主内容会自动占满除Footer之外的所有垂直空间——不管main内容多少，Footer都会固定在inner-container的底部，而inner-container已经撑满页面高度，最终实现Footer固定在页面底部的效果。

当main内容超过视口高度时，Footer会随页面滚动到内容底部；当内容不足时，Footer会停留在视口底部，这是标准粘性底部的表现。

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