如何将div的内容与底部对齐

Z时代
2024-01-10
分类：问答

说我有以下CSS和HTML代码：

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

标头部分的高度固定，但是标头内容可能会更改。

我希望标题的内容与标题部分的底部垂直对齐，因此文本的最后一行“粘贴”到标题部分的底部。

因此，如果只有一行文本，则将是：

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

如果有三行：

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

如何在CSS中完成此操作？

回答：

相对+绝对定位是您最好的选择：

#header {
  position: relative;
  min-height: 150px;
}
#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}
#header, #header * {
background: rgba(40, 40, 100, 0.25);
}
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>