如何将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中完成此操作？
问题答案：
相对+绝对定位是您最好的选择：
#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>
但是您可能会遇到问题。当我尝试它时，在内容下方显示下拉菜单时出现问题。只是不漂亮。
坦白地说，对于垂直居中问题以及项目的垂直对齐问题并非固定高度，仅使用表格会更容易。
-
问题内容： 任何人都可以解释如何将页脚div与页面底部对齐。从我所看到的示例中，它们都显示了如何使div保持在底部可见，无论您将页面滚动到何处。虽然我不想要那样。我希望它固定在页面的底部，所以它不会移动。感谢帮助！ 问题答案： 更新 我的原始答案来自很久以前，并且链接已断开；更新它，使其继续有用。 我包括内联的更新解决方案，以及JSFiddle上的工作示例。注意：尽管没有内联那些样式，但我依赖CS
-
问题内容： 鉴于以下HTML： 我想坚持到底。 不使用绝对定位就可以实现吗？如果float属性支持’bottom’的值，那似乎可以解决问题，但是不幸的是，事实并非如此。 问题答案： 可能不会。 分配给，然后分配给。
-
问题内容： 如何使条形图的底部而不是顶部？现在它们粘在容器（）的顶部，但我希望它们粘在底部。 如您所见，我不知道最高条的高度，所以我也不知道容器的高度。 应该简单吧？如果有帮助，它只能在不错的浏览器中工作。 PS。条的数量是可变的（在示例中不是），其高度是可变的。只有它们的宽度是静态的。定位无济于事，因为容器div没有测量值。 问题答案： 这将达到目的： 它在默认情况下已应用的父div上使用。这改
-
问题内容： 我尝试将我的文本与其他文章和答案中的div底部对齐，以了解Stack Overflow中的其他问题，并学会了使用不同的CSS属性来处理此问题。但是我做不到。基本上我的HTML代码是这样的： 效果是，在FF中，我仅获得垂直线（div处于折叠状态），并将文本写在其旁边。如何防止折叠但宽度适合文本？ 问题答案： 弹性解决方案 如果您想使用该解决方案，那将是非常好的。但是，除了破解之外，我们还
-
问题内容： 我希望一个html图像与div标签的底部齐平。我似乎找不到解决此问题的方法。 这是我的HTML： 问题是div嵌套在具有填充或边距的其他div中。 问题答案： 在包装的div标签上添加相对位置，然后将图像绝对定位在其中，如下所示： CSS： HTML： 现在，图像位于div的底部。
-
问题内容： 我多次使用float：right（或left）将图像和插入框浮动在容器的顶部。最近，我遇到了一个需要使div在另一个div的右下角浮动的问题，该浮动与您使用float获得的普通文本换行（仅在上方和左侧换行的文本）相同。 我认为即使float没有底值，这也必须相对容易，但是我无法使用多种技术来做到这一点，并且在Web上搜索除了使用绝对定位外别无其他选择，但这并没有给出正确的自动换行行为。