html - 如何将div的内容与底部对齐(How to align content of a div to the bottom)

Question

Say I have the following CSS and HTML code:

(说我有以下CSS和HTML代码：)

 #header { height: 150px; } 

 <div id="header"> <h1>Header title</h1> Header content (one or multiple lines) </div> 

The header section is fixed height, but the header content may change.

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

I would like the content of the header to be vertically aligned to the bottom of the header section, so the last line of text "sticks" to the bottom of the header section.

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

So if there is only one line of text, it would be like:

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

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

And if there were three lines:

(如果有三行：)

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

How can this be done in CSS?

(如何在CSS中完成此操作？)

  ask by kristof translate from so

Answer 1

Relative+absolute positioning is your best bet:

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

 #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> 

But you may run into issues with that.

(但是您可能会遇到问题。)

When I tried it I had problems with dropdown menus appearing below the content.

(当我尝试它时，在内容下方显示下拉菜单时出现问题。)

It's just not pretty.

(只是不漂亮。)

Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren't fixed height, it's easier just to use tables.

(坦率地说，对于垂直居中问题以及项目的垂直对齐问题不是固定高度，使用表格会更容易。)

Example: Can you do this HTML layout without using tables?

(示例： 您可以在不使用表格的情况下进行HTML布局吗？)