假设我有以下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>
其他回答
对前面提到的其他flex-box解决方案的补充:
你可以在第一个div上使用flex-grow: 1 .这样，你的第二个div将与底部对齐，而第一个div将覆盖所有剩余空间。
在父div上，必须使用display: flex和flex-direction: column。
/* parent-wrapper div */
.container {
display: flex;
flex-direction: column;
}
/* first-upper div */
.main {
flex-grow: 1;
}
检查提琴:https://jsfiddle.net/1yj3ve05/
一个完美的跨浏览器的例子是:
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上运行这是至关重要的。此外，这应该是第一个标签，上面不应该出现任何东西。
使用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>
相对+绝对定位是你最好的选择:
#标题{ 位置:相对; 最小高度:150 px; ｝ #标题内容{ 位置:绝对的; 底部:0; 左:0; ｝ #header， #header * { 背景:rgba(40,40,100,0.25); ｝ < div id = "头" > h1标题< h1 > < / > 在最后一个地方，情况可能不是这样，他们会长期存在，会深深地扎根，不会轻易被铲除。修改宪法的计划，为了纠正最近的违反宪法的行为，以及其他目的，实际上已经在一个州尝试过了 < / div >
但你可能会遇到问题。当我尝试它时，我遇到了下拉菜单出现在内容下面的问题。这并不漂亮。
老实说，对于垂直定心问题，以及任何与物品的垂直对齐问题都不是固定高度的问题，使用表格更容易。
例子:你可以不使用表格来做这个HTML布局吗?
如果你有多个动态高度项，使用CSS显示table和table-cell的值:
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
演示也有一个例子如何垂直中心对齐使用相同的技术。
