假设我有以下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中做到这一点?
当前回答
#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>
#标题{ 身高:250 px; 显示:flex; flex-direction:列; 背景颜色:黄色; ｝ .top { flex: 1; ｝ < div id = "头" > <h1 class="top">头标题</h1> 标题内容(一行或多行) < / 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的高度。然后在里面，样式H1标签如下:
float: left;
padding: 90px 10px 11px
我在一个客户的网站上工作，设计要求文本在某个div的底部。我已经使用这两行实现了结果，它工作得很好。此外，如果文本确实展开，填充将保持不变。
如果父元素/块元素的行高大于Inline元素的行高，Inline或Inline块元素可以对齐到块级元素的底部
标记:
<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;
}
*确保你在标准模式
试一试:
div.myclass { margin-top: 100%; }
尝试更改%来修复它。例如:120%或90%等等。
我发现这个解决方案基于一个默认的引导启动模板
/* 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;
}
