假设我有以下 CSS 和 HTML 代码：
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>标题部分的高度是固定的，但标题内容可能会发生变化。
我希望标题的内容与标题部分的底部垂直对齐，因此最后一行文本“粘”到标题部分的底部。
所以如果只有一行文本，它会像：
----------------------------------------- | 标题 | | | | 标题内容（产生一行） -----------------------------------------
如果有三行：
----------------------------------------- | 标题 | | 标题内容（就是这样 | 很多东西，它完美 | 跨越三行） -----------------------------------------
如何在 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">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>但是你可能会遇到问题。当我尝试它时，我遇到了出现在内容下方的下拉菜单的问题。它只是不漂亮。
老实说，对于垂直居中问题，以及项目的任何垂直对齐问题都不是固定高度，使用表格更容易。
如果您不担心旧版浏览器，请使用 flexbox。
父元素需要将其显示类型设置为 flex
div.parent {
display: flex;
height: 100%;
}
然后将子元素的 align-self 设置为 flex-end。
span.child {
display: inline-block;
align-self: flex-end;
}
这是我用来学习的资源： http: //css-tricks.com/snippets/css/a-guide-to-flexbox/
使用 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;
}
正如cletus 所指出的，您需要确定标头内容才能完成这项工作。
<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>
我使用这些属性并且它有效！
#header {
display: table-cell;
vertical-align: bottom;
}
在同一个问题苦苦挣扎了一段时间后，我终于找到了一个满足我所有要求的解决方案：
解决方案只需要一个<div>，我称之为“对齐器”：
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
这个技巧通过创建一个又高又瘦的 div 来实现，它将文本基线推到容器的底部。
这是一个完整的示例，可以实现 OP 的要求。我将“bottom_aligner”变厚变红，仅用于演示目的。
CSS：
.outer-container {
border: 2px solid black;
height: 175px;
width: 300px;
}
.top-section {
background: lightgreen;
height: 50%;
}
.bottom-section {
background: lightblue;
height: 50%;
margin: 8px;
}
.bottom-aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 3px;
background: red;
}
.bottom-content {
display: inline-block;
}
.top-content {
padding: 8px;
}
HTML：
<body>
<div class="outer-container">
<div class="top-section">
This text
<br> is on top.
</div>
<div class="bottom-section">
<div class="bottom-aligner"></div>
<div class="bottom-content">
I like it here
<br> at the bottom.
</div>
</div>
</div>
</body>
现代的方法是使用flexbox。请参见下面的示例。您甚至不需要包装Some text...到任何 HTML 标记中，因为直接包含在 flex 容器中的文本被包装在匿名 flex 项中。
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>如果只有一些文本并且您想垂直对齐到容器的底部。
section {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
align-items: flex-end; /* bottom of the box */
}<section>Some text aligns to the bottom</section>display: flex;
align-items: flex-end;
如果父/块元素的行高大于内联元素的行高，则内联或内联块元素可以与块级元素的底部对齐。*
标记：
<h1 class="alignBtm"><span>I'm at the bottom</span></h1>
CSS：
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
*确保您处于标准模式
你可以简单地实现 flex
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>您可以使用以下方法：
.header-parent {
height: 150px;
display: grid;
}
.header-content {
align-self: end;
}<div class="header-parent">
<h1>Header title</h1>
<div class="header-content">
Header content
</div>
</div>这是另一种使用 flexbox 但不使用flex-end进行底部对齐的解决方案。这个想法是将h1设置为margin-bottomauto以将剩余内容推到底部：
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header h1 {
margin-bottom:auto;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>我们也可以margin-top:auto对文本执行相同的操作，但在这种情况下，我们需要将其包装在 a divor中span：
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header span {
margin-top:auto;
}<div id="header">
<h1>Header title</h1>
<span>Header content (one or multiple lines)</span>
</div>如果您有多个动态高度项，请使用表格和表格单元格的 CSS 显示值：
HTML
<html>
<body>
<div class="valign bottom">
<div>
<div>my bottom aligned div 1</div>
<div>my bottom aligned div 2</div>
<div>my bottom aligned div 3</div>
</div>
</div>
</body>
</html>
CSS
html,
body {
width: 100%;
height: 100%;
}
.valign {
display: table;
width: 100%;
height: 100%;
}
.valign > div {
display: table-cell;
width: 100%;
height: 100%;
}
.valign.bottom > div {
vertical-align: bottom;
}
我在这里创建了一个 JSBin 演示：http: //jsbin.com/INOnAkuF/2/edit
该演示还有一个示例，如何使用相同的技术进行垂直居中对齐。
将 div 移动到底部的最佳解决方案如下。基本上，您需要做的是将显示 flex 和 flex-direction 设置为父列，并为其子项添加一个“margin-top：auto”，该子项需要浮动到容器底部注意：我用过引导程序及其类。
.box-wrapper {
height: 400px;
border: 1px solid #000;
margin: 20px;
display: flex; // added for representation purpose only. Bootstrap default class is already added
flex-direction: column;
}
.link-02 {
margin-top: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrapper d-flex flex-column col-4">
<div>incidunt blanditiis debitis</div>
<div class="news-box">
<img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150">
<p>Labore consectetur doloribus qui ab et qui aut facere quos.</p>
</div>
<a href="https://oscar.com" target="_blank" class="link-02">
This is moved to bottom with minimal effort
</a>
</div>所有这些答案都对我有用……我不是 flexbox 专家，但这很容易弄清楚，它简单易懂和易于使用。要将某些内容与其余内容分开，请插入一个空 div 并让它增长以填充空间。
https://jsfiddle.net/8sfeLmgd/1/
.myContainer {
display: flex;
height: 250px;
flex-flow: column;
}
.filler {
flex: 1 1;
}
<div class="myContainer">
<div>Top</div>
<div class="filler"></div>
<div>Bottom</div>
</div>
当底部内容的大小不固定时，即使容器大小不固定，这也会按预期做出反应。
为此，您不需要绝对+相对。很有可能使用容器和数据的相对位置。这就是你的做法。
假设您的数据高度将是x. 您的容器是相对的，页脚也是相对的。您所要做的就是添加到您的数据中
bottom: -webkit-calc(-100% + x);
您的数据将始终位于容器的底部。即使您有具有动态高度的容器也可以使用。
HTML会是这样的
<div class="container">
<div class="data"></div>
</div>
CSS会是这样的
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.data{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
希望这可以帮助。
这是灵活的方法。当然，IE8 不支持它，因为用户在 7 年前就需要它。根据您需要支持的内容，其中一些可以取消。
尽管如此，如果有一种方法可以在没有外部容器的情况下做到这一点，那就太好了，只需让文本在它自己的内部对齐即可。
#header {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
}
一个非常简单的单行解决方案是在 div 中添加 line-heigth，记住所有 div 的文本都会放在底部。
CSS：
#layer{width:198px;
height:48px;
line-height:72px;
border:1px #000 solid}
#layer a{text-decoration:none;}
HTML：
<div id="layer">
<a href="#">text at div's bottom.</a>
</div>
请记住，当您只希望 div 中的文本下降时，这是一个实用且快速的解决方案，如果您需要组合图像和内容，则必须编写更复杂和响应式的 CSS
除了提到的其他 flex-box 解决方案之外：
您可以flex-grow: 1在第一个 div 上使用。这样，您的第二个 div 将与底部对齐，而第一个 div 将覆盖所有剩余空间。
在父 div 上，您必须使用display: flexand flex-direction: column。
/* parent-wrapper div */
.container {
display: flex;
flex-direction: column;
}
/* first-upper div */
.main {
flex-grow: 1;
}
如果您可以设置内容的包装div的高度（#header-content如其他回复所示），而不是整个#header，也许您也可以尝试这种方法：
HTML
<div id="header">
<h1>some title</h1>
<div id="header-content">
<span>
first line of header text<br>
second line of header text<br>
third, last line of header text
</span>
</div>
</div>
CSS
#header-content{
height:100px;
}
#header-content::before{
display:inline-block;
content:'';
height:100%;
vertical-align:bottom;
}
#header-content span{
display:inline-block;
}
我设计了一种比上面提到的方法简单得多的方法。
设置标题 div 的高度。然后在其中设置H1标签的样式，如下所示：
float: left;
padding: 90px 10px 11px
我正在为客户开发一个网站，设计要求文本位于某个 div 的底部。我已经使用这两行实现了结果，并且效果很好。此外，如果文本确实扩展，填充将保持不变。
我发现这个解决方案基于默认的引导启动模板
/* HTML */
<div class="content_wrapper">
<div class="content_floating">
<h2>HIS This is the header<br>
In Two Rows</h2>
<p>This is a description at the bottom too</p>
</div>
</div>
/* css */
.content_wrapper{
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
.content_floating{
display: table-cell;
vertical-align: bottom;
padding-bottom:80px;
}
#header {
height: 150px;
display:flex;
flex-direction:column;
}
.top{
flex: 1;
}
<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>
#header {
height: 250px;
display:flex;
flex-direction:column;
background-color:yellow;
}
.top{
flex: 1;
}<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>尝试：
div.myclass { margin-top: 100%; }
尝试更改 % 来修复它。示例：120% 或 90% ...等。
我刚刚为客户做的网站要求页脚文本是一个高框，底部的文本我通过简单的填充实现了这一点，应该适用于所有浏览器。
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
一个完美的跨浏览器示例可能是这里：
http://www.csszengarden.com/?cssfile=/213/213.css&page=0
这个想法是既要在底部显示 div 又要让它粘在那里。通常，简单的方法会使粘性 div 与主要内容一起向上滚动。
以下是一个完全工作的最小示例。请注意，不需要 div 嵌入技巧。许多BR只是为了强制出现滚动条：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#floater {
background: yellow;
height: 200px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 5;
border-top: 2px solid gold;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="floater"></div>
</body>
</html>
如果您想知道您的代码可能无法在 IE 上运行，请记住在顶部添加 DOCTYPE 标记。这在 IE 上工作是至关重要的。此外，这应该是第一个标签，其上方不应出现任何内容。
似乎正在工作：
#content {
/* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
vertical-align: -@header_height + @content_height;
/* only need it if your content is <div>,
* if it is inline (e.g., <a>) will work without it */
display: inline-block;
}
使用less使得解决 CSS 难题更像是编码而不是......我只是喜欢 CSS。当您只需更改一个参数即可更改整个布局（而不破坏它:)，这是一种真正的乐趣。
2015年解决方案
<div style='width:200px; height:60px; border:1px solid red;'>
<table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
<tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
</table>
</div>
http://codepen.io/anon/pen/qERMdx
别客气