假设我有以下CSS和HTML代码:
#标题{ 身高:150 px; ｝ < div id = "头" > <标题>标题< / h1 > 标题内容(一行或多行) < / 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中做到这一点?
当前回答
使用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>
其他回答
这是一种灵活的方法。当然，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;
}
您可以使用以下方法:
.header-parent { 身高:150 px; 显示:网格; ｝ .header-content { align-self:结束; ｝ < div class = " header-parent”> <标题>标题< / h1 > < div class = "标题内容”> 标题内容 < / div > < / div >
一个完美的跨浏览器的例子是:
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上运行这是至关重要的。此外，这应该是第一个标签，上面不应该出现任何东西。
在为同样的问题挣扎了一段时间后，我终于找到了一个满足我所有要求的解决方案:
不需要我知道容器的高度。 与相对+绝对解决方案不同，内容不会漂浮在自己的层中(即，它通常嵌入在容器div中)。 支持跨浏览器(IE8+)。 易于实现。
解决方案只需要一个<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、网格系统或显示表以不同的方式实现这一点。我更喜欢flex和margin-bottom: auto的组合。以下是我个人收集的文本底部可能性:
1. Flex / margin-top: auto;
.parent { 最小高度:200 px; 背景:绿色; 显示:flex; ｝ .child { margin-top:汽车; 背景:红色; 填充:5 px; 颜色:白色; ｝ < div class = "父" > <div class="child">底部文本</div> < / div >
2. Flex / align-self: Flex -end
.parent { 显示:flex; 最小高度:200 px; 背景:绿色; ｝ .child { align-self: flex-end; 背景:红色; 填充:5 px; 颜色:白色; ｝ < div class = "父" > <div class="child">底部文本</div> < / div >
3.Flex / align-items: Flex -end;
.parent { 最小高度:200 px; 背景:绿色; 显示:flex; 对齐项目:flex-end; ｝ .child { 填充:5 px; 背景:红色; 颜色:白色; ｝ < div class = "父" > <div class="child">底部文本</div> < / div >
4. Grid / align-self:结束;
.parent { 最小高度:200 px; 背景:绿色; 显示:网格; } .child { align-self:结束; 背景:红色; 填充:5 px; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >
5. 表/垂直对齐:底部;
就个人而言，我不喜欢这种处理表格的方法。
.parent { 最小高度:200 px; 背景:绿色; 显示:表; 宽度:100%; ｝ .child { 显示:表格单元; vertical-align:底部; 背景:红色; 填充:5 px; 颜色:白色; ｝ < div class = "父" > <div class="child">底部文本</div> < / div >
用垫片
6. Flex;/ flex: 1;
.parent { 最小高度:200 px; 背景:绿色; 显示:flex; flex-flow:列; ｝ .spacer { flex: 1; ｝ .child { 填充:5 px; 背景:红色; 颜色:白色; ｝ < div class = "父" > < div class = "隔离" > < / div > <div class="child">底部文本</div> < / div >
7. Flex / Flex -grow: 1;
.parent { 最小高度:200 px; 背景:绿色; 显示:flex; flex-direction:列; ｝ .spacer { flex-grow: 1; ｝ .child { 填充:5 px; 背景:红色; 颜色:白色; ｝ < div class = "父" > < div class = "隔离" > < / div > <div class="child">底部文本</div> < / div >
8. Inline-block / PseudoClass::before
.parent { 最小高度:200 px; 背景:绿色; ｝ {前.child:: 显示:inline-block; 内容:”; 高度:100%; vertical-align:底部; ｝ .child { 身高:200 px; 填充:5 px; 背景:红色; 颜色:白色; ｝ < div class = "父" > <div class="child">底部文本</div> < / div >
❤️我个人比较喜欢的版本是:， 2. 和3。
