假设我有以下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中做到这一点?
当前回答
一个完美的跨浏览器的例子是:
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移到底部的最佳解决方案如下所示。 基本上，你需要做的是将display flex和flex-direction设置为父类的列，并将'margin-top: auto'添加到它的子类，该子类需要被浮动到容器的底部 注意:我已经使用了bootstrap及其类。
.box-wrapper { 身高:400 px; 边框:1px实心#000; 保证金:20 px; 显示:flex;//仅用于表示。引导默认类已经添加 flex-direction:列; ｝ .link-02 { margin-top:汽车; ｝ <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="box-wrapper d-flex flex-column col-4"> <div>意外blanditiis debitis</div> < div class = " news-box”> <img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150"> <p>连续痛苦的分娩和面对的分娩</p> < / div > <a href="https://oscar.com" target="_blank" class="link-02"> 这是移动到底部与最小的努力 < / > < / div >
#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上运行这是至关重要的。此外，这应该是第一个标签，上面不应该出现任何东西。
所有这些答案，没有一个对我有用……我不是flexbox专家，但这很容易理解，很容易理解和使用。要将某些内容与其余内容分开，请插入一个空div，并让它增长以填充空间。
https://jsfiddle.net/8sfeLmgd/1/
.myContainer {
display: flex;
height: 250px;
flex-flow: column;
}
.filler {
flex: 1 1;
}
<div class="myContainer">
<div>Top</div>
<div class="filler"></div>
<div>Bottom</div>
</div>
当底部内容的大小不固定时，当容器的大小不固定时，这种反应就像预期的那样。
似乎起作用了:
#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;
}
使用较少使解决CSS谜题更像编码而不是像…我就是喜欢CSS。这是一个真正的乐趣，当你可以改变整个布局(而不破坏它:)只是改变一个参数。
