使用Flex布局时如何让中间内容区底部对齐并保留滚动条

问题描述 #

我有一个固定顶部header和底部footer的布局，中间content区域填充剩余空间，内容过多时会出现滚动条。现在需要让中间区域的内容从底部开始显示，而非顶部，但尝试设置margin和调整flex-direction都没成功，求解决方法。

原HTML代码：

<div id="app">
  <div id="header">
    Header
  </div>

  <div id="middle">
    Middle content
  </div>

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

原CSS代码：

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

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#header {
  height: 60px;
  background-color: blue;
}

#footer {
  height: 60px;
  background-color: red;
}

#middle {
  flex: 1;
  overflow-y: scroll;
  align-items: flex-end;
}

解决方案 #

要实现内容底部对齐同时保留滚动功能，需要对中间区域的结构和样式做两处关键调整：

1. 在#middle内部新增一个子容器包裹所有内容，避免flex布局直接影响内容元素的排版；
2. 将#middle设置为flex容器，通过justify-content: flex-end实现内容底部对齐，同时保留滚动属性。

修改后的HTML

<div id="app">
  <div id="header">
    Header
  </div>

  <div id="middle">
    <div class="content-container">
      Middle content<br>
      <!-- 可添加更多内容测试滚动效果 -->
      Line 1<br>
      Line 2<br>
      Line 3<br>
      Line 4<br>
      Line 5<br>
      Line 6<br>
      Line 7<br>
      Line 8<br>
      Line 9<br>
      Line 10<br>
      Line 11<br>
      Line 12
    </div>
  </div>

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

修改后的CSS

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

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#header {
  height: 60px;
  background-color: blue;
}

#footer {
  height: 60px;
  background-color: red;
}

#middle {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.content-container {
  padding: 16px; /* 可选：优化内边距提升视觉体验 */
}

原理说明 #

• #middle被设置为flex容器后，justify-content: flex-end会将子容器.content-container推至容器底部，实现内容初始位置的底部对齐；
• 当.content-container的高度超过#middle的可用空间时，#middle的overflow-y: auto会自动触发垂直滚动条，保证内容可正常浏览；
• 子容器的存在隔离了flex布局的对齐规则，不会干扰内部内容的正常排版。

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