假设我有以下CSS和HTML代码：
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>头部区域的高度是固定的，但头部内容可能会改变。
我希望头部内容垂直对齐到头部区域的底部，这样文本的最后一行就会“沿着”头部区域的底部固定。
所以，如果只有一行文本，它会像这样：
----------------------------- | Header title | | | | header content (结果只有一行) -----------------------------
如果有三行，则会像这样：
----------------------------- | Header title | | header content (内容很多，恰好跨越了三行) -----------------------------
如何使用CSS实现呢？
我想出了一个比之前提到的方法更简单的方式。
设置头部
H1标签样式：
float: left;
padding: 90px 10px 11px
#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>
#header {
height: 250px;
display:flex;
flex-direction:column;
background-color:yellow;
}
.top{
flex: 1;
}<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>/* 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;
}
*{
margin:0;
}
div{
width:300px;
background:cornflowerblue;
color:#fff;
height:150px;
display:flex;
justify-content:space-between;
flex-direction:column;
}<div>
<h4>Heading</h4>
<p>This is a paragraph</p>
<!-- <p> Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</p> -->
</div>只需简单地使用display:flex和flex-direction:column将子元素垂直对齐，然后应用justify-content:space-between来将父元素的高度与其子元素内容对齐。这样就可以实现您的目标。尝试使用此片段解决问题。
我非常感谢您的关注。
使用以下代码尝试：
div.myclass { margin-top: 100%; }
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
padding: 0 30px 有点多余，你可以直接写成 padding: 30px 然后再加上另外两个声明。 - Andrewpadding: 60px 30px 8px;，padding: 60px 30px 8px 30px;，四个明确的 padding- 规则甚至 @TheWaxMann 的建议都更好 - 我愿意并有能力争辩这一点；-) - Zach Lysobeyhttp://www.csszengarden.com/?cssfile=/213/213.css&page=0
这个想法是同时显示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>
<br />标签进行自我关闭... - Amos M. Carpentercontent-type标头提供上述文档会导致浏览器抛出XML解析错误。 - Razor看起来正常：
#content {
/* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
vertical-align: -@header_height + @content_height;
/* only need it if your content is <div>,
* if it is inline (e.g., <a>) will work without it */
display: inline-block;
}
使用less可以使解决CSS难题更像编程而不是...我真的很喜欢CSS。当你只需改变一个参数就能改变整个布局（而不会破坏它 :)）时，这是一种真正的享受。
2015年的解决方案
<div style='width:200px; height:60px; border:1px solid red;'>
<table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
<tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
</table>
</div>
http://codepen.io/anon/pen/qERMdx
欢迎你