如何将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 {&nbsp; position: relative;&nbsp; min-height: 150px;}#header-content {&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; left: 0;}#header, #header * {&nbsp; background: rgba(40, 40, 100, 0.25);}<div id="header">&nbsp; <h1>Title</h1>&nbsp; <div id="header-content">Some content</div></div>但你可能会遇到问题。当我尝试它时，我遇到了出现在内容下面的下拉菜单的问题。只是不漂亮。老实说，对于垂直对中的问题，以及，任何与项目的垂直对齐问题都不是固定的高度，只需使用表就更容易了。例子：您能在不使用表的情况下完成这个HTML布局吗？

Answer 2

使用CSS定位。/*&nbsp;creates&nbsp;a&nbsp;new&nbsp;stacking&nbsp;context&nbsp;on&nbsp;the&nbsp;header&nbsp;*/#header&nbsp;{ &nbsp;&nbsp;position:&nbsp;relative;}/*&nbsp;positions&nbsp;header-content&nbsp;at&nbsp;the&nbsp;bottom&nbsp;of&nbsp;header's&nbsp;context&nbsp;*/#header-content&nbsp;{ &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;bottom:&nbsp;0;}如克莱图斯请注意，您需要标识标题-内容才能使此工作。<span&nbsp;id="header-content">some&nbsp;header&nbsp;content</span>&nbsp;<div&nbsp;style="height:100%;&nbsp;position:relative;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="height:10%;&nbsp;position:absolute;&nbsp;bottom:0px;">bottom</div></div>

Answer 3

我使用这些属性，它可以工作！#header&nbsp;{ &nbsp;&nbsp;display:&nbsp;table-cell; &nbsp;&nbsp;vertical-align:&nbsp;bottom;}