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

Question

如何将div的内容与底部对齐？假设我有以下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">Some content</div>

</div>

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

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

例子：您能在不使用表的情况下完成这个HTML布局吗？

Answer 2

使用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>

Answer 3

我使用这些属性，它可以工作！

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