html - 如何将div的内容对齐到底部

Question

假设我有以下 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 中如何实现？

Answer 1

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

#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">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

但是您可能会遇到问题。当我尝试它时，我遇到了下拉菜单出现在内容下方的问题。它只是不漂亮。

老实说，对于垂直居中问题，以及元素的任何垂直对齐问题都不是固定高度，使用表格会更容易。

示例:Can you do this HTML layout without using tables?