假设我有以下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>
其他回答
你不需要绝对+相对。对于容器和数据都使用相对位置是非常可能的。这就是你要做的。
假设你的数据高度是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);
}
这里有一个活生生的例子
希望这能有所帮助。
对前面提到的其他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/
* { 保证金:0; ｝ div { 宽度:300 px; 背景:cornflowerblue; 颜色:# fff; 身高:150 px; 显示:flex; justify-content:之间的空间; flex-direction:列; ｝ < div > 标题< h4 > < / h4 > <p>这是一个段落</p> <！自16世纪以来，Ipsum一直是行业标准的假文本，当时一个不知名的打印机拿了一大堆字，把它打乱了 < / div >
只需简单地使用display:flex和flex-direction:column使子div按垂直顺序同步，然后应用justify-content:space-between来调整父div的高度及其子内容。这样你才能实现你的目标。尝试这个代码片段来解决这个问题。
非常感谢你的兴趣。
这里是另一个解决方案使用flexbox，但没有使用flex-end底部对齐。这个想法是在h1上设置margin-bottom，以自动将剩余的内容推到底部:
#标题{ 身高:350 px; 显示:flex; flex-direction:列; 边界:1 px固体; ｝ #标题h1 { margin-bottom:汽车; ｝ < div id = "头" > <标题>标题< / h1 > 页眉内容(一行或多行)页眉内容(一行或多行)页眉内容(一行或多行)页眉内容(一行或多行) < / div >
我们也可以对文本的margin-top:auto做同样的事情，但在这种情况下，我们需要将它包装在div或span中:
#标题{ 身高:350 px; 显示:flex; flex-direction:列; 边界:1 px固体; ｝ #头span { margin-top:汽车; ｝ < div id = "头" > <标题>标题< / h1 > <span>标头内容(一行或多行)</span> < / 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/
