如何用CSS实现div内多内容垂直对齐到底部并自适应布局？

原始代码 #

CSS 代码 #

#header {
  height: 150px;
}

HTML 代码 #

<div id="header">
  <h1>Header title</h1>
  <p>Header content (one or multiple lines)</p>
</div>

需求描述 #

需要让#header容器内的内容垂直对齐到底部，具体要求：

• 仅显示标题时，标题位于容器底部
• 同时显示标题和副标题时，两者垂直排列且整体靠容器底部
• 副标题内容增多时自动换行，不会溢出容器，而是向上扩展占用容器空间

对应的效果示例：
仅标题时：

--------------
|
|
|
|heading
----------------

标题加少量副标题时：

|
|
|
|heading
|subtextsubtext
----------------

标题加大量副标题时：

--------------
|
|heading
|subtextsubtext
|subtextsubtext
|subtextsubtext
----------------

实现方案 #

使用Flexbox布局可以轻松实现这个需求，修改#header的CSS样式即可：

#header {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden; /* 防止内容过多溢出容器，如需滚动可改为overflow-y: auto */
}

样式说明 #

• display: flex：将容器设置为弹性布局，方便控制子元素的排列方式
• flex-direction: column：让容器内的子元素（标题和副标题）垂直排列
• justify-content: flex-end：在垂直方向上把所有子元素对齐到容器底部
• overflow: hidden：当副标题内容过多超出容器高度时，隐藏溢出部分；如果需要支持滚动查看全部内容，可以替换为overflow-y: auto

如果需要调整标题和副标题之间的间距，可以给它们添加margin样式，比如：

#header h1 {
  margin: 0 0 8px 0; /* 标题底部保留8px间距 */
}
#header p {
  margin: 0;
}

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