说我有以下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>
但是您可能会遇到问题。当我尝试它时，在内容下方显示下拉菜单时出现问题。只是不漂亮。
坦白地说，对于垂直居中问题以及项目的垂直对齐问题并非固定高度，仅使用表格会更容易。
