协慌网

说我有以下 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>

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

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

示例： 您可以在不使用表的情况下执行此 HTML 布局吗？

使用 CSS 定位。

/* creates a new stacking context on the header */
#header {
  position: relative;
}

/* positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

正如克莱特斯所说，你需要确定标题内容才能使其发挥作用。

<span id="header-content">some header content</span> 

<div style="height:100%; position:relative;">                                              
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>

我使用这些属性，它的工作原理！

#header {
  display: table-cell;
  vertical-align: bottom;
}