假设我有以下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中做到这一点?
你不需要绝对+相对。对于容器和数据都使用相对位置是非常可能的。这就是你要做的。
假设你的数据高度是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);
}
这里有一个活生生的例子
希望这能有所帮助。
这里是另一个解决方案使用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 >
一个完美的跨浏览器的例子是:
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上运行这是至关重要的。此外,这应该是第一个标签,上面不应该出现任何东西。