如何将div的内容对齐到底部？
说我有以下的CSS和HTML代码：
#header { height: 150px; } <div id="header"> <h1>Header title</h1> Header content (one or multiple lines) </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 { position: relative; min-height: 150px; } #header-content { position: absolute; bottom: 0; left: 0; } #header, #header * { background: rgba(40, 40, 100, 0.25); }
<div id="header"> <h1>Title</h1> <div id="header-content">Some content</div> </div>
使用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>
我使用这些属性，它的工作原理！
#header { display: table-cell; vertical-align: bottom; }
经过一段时间的努力，终于找到了符合我所有要求的解决方案：
- 不要求我知道容器的高度。
- 与相对+绝对解决方案不同，内容不会浮动在其自己的层（即它正常嵌入在容器div中）。
- 适用于各种浏览器（IE8 +）。
- 简单实施。
解决方案只需要一个<div> ，我称之为“对齐器”：
CSS
.bottom_aligner { display: inline-block; height: 100%; vertical-align: bottom; width: 0px; }
HTML
<div class="bottom_aligner"></div> ... Your content here ...
这个技巧通过创建一个高大的瘦身div来工作，它将文本基线推到容器的底部。
这是一个完整的例子，实现OP所要求的。 我只是为了演示目的而将“bottom_aligner”做得粗而红。
CSS：
.outer-container { border: 2px solid black; height: 175px; width: 300px; } .top-section { background: lightgreen; height: 50%; } .bottom-section { background: lightblue; height: 50%; margin: 8px; } .bottom-aligner { display: inline-block; height: 100%; vertical-align: bottom; width: 3px; background: red; } .bottom-content { display: inline-block; } .top-content { padding: 8px; }
HTML：
<body> <div class="outer-container"> <div class="top-section"> This text <br> is on top. </div> <div class="bottom-section"> <div class="bottom-aligner"></div> <div class="bottom-content"> I like it here <br> at the bottom. </div> </div> </div> </body>
如果您不担心传统浏览器使用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/
如果父元素/块元素的行高大于内联元素的行高，则内嵌或内嵌块元素可以与块级元素的底部对齐。
标记：
<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; }
*确保你在标准模式
现代的做法是使用flexbox 。 看下面的例子。 您甚至不需要将Some text...包装到任何HTML标签中，因为直接包含在柔性容器中的文本被包装在匿名Flex项目中。
header { border: 1px solid blue; height: 150px; display: flex; /* defines flexbox */ flex-direction: column; /* top to bottom */ justify-content: space-between; /* first item at start, last at end */ } h1 { margin: 0; }
<header> <h1>Header title</h1> Some text aligns to the bottom </header>
display: flex; align-items: flex-end;
如果您有多个动态高度项目，请使用表格和表格单元格的CSS显示值：
HTML
<html> <body> <div class="valign bottom"> <div> <div>my bottom aligned div 1</div> <div>my bottom aligned div 2</div> <div>my bottom aligned div 3</div> </div> </div> </body> </html>
CSS
html, body { width: 100%; height: 100%; } .valign { display: table; width: 100%; height: 100%; } .valign > div { display: table-cell; width: 100%; height: 100%; } .valign.bottom > div { vertical-align: bottom; }
我在这里创建了一个JSBin演示： http : //jsbin.com/INOnAkuF/2/edit
演示还有一个例子，如何使用相同的技术垂直居中对齐。
我知道这已经过了2岁了，但是我设计了一个比上面提到的要简单得多的方法。
设置标题div的高度。 然后在里面，按如下方式设计你的H1标签：
float: left; padding: 90px 10px 11px
我正在为一个客户端的网站工作，设计要求文本在某个div的底部。 我已经实现了使用这两行的结果，它工作正常。 另外，如果文本扩展，填充将保持不变。
如果你可以设置内容的包装div的高度（＃header-content如其他人的回复中所示），而不是整个#header，也许你也可以尝试这种方法：
HTML
<div id="header"> <h1>some title</h1> <div id="header-content"> <span> first line of header text<br> second line of header text<br> third, last line of header text </span> </div> </div>
CSS
#header-content{ height:100px; } #header-content::before{ display:inline-block; content:''; height:100%; vertical-align:bottom; } #header-content span{ display:inline-block; }
显示在codepen上
你不需要绝对+相对的。 使用容器和数据的相对位置是非常可能的。 这是你如何做到的。
假设你的数据的高度是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); }
现场示例
希望这可以帮助。
这是灵活的方式来做到这一点。 当然，IE8不支持，因为用户需要7年前。 根据你需要的支持，其中的一些可以完成。
不过，如果有一种方法可以在没有外部容器的情况下进行，那么只要将文本与自己对齐即可。
#header { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 150px; }
尝试与：
div.myclass { margin-top: 100%; }
尝试改变％来修复它。 例如：120％或90％…等。
我刚刚为一个客户端做的网站要求页脚文本是一个很高的盒子，底部的文本我用简单的填充来实现，应该适用于所有的浏览器。
<div id="footer"> some text here </div>
#footer { padding: 0 30px; padding-top: 60px; padding-bottom: 8px; }
似乎工作：
HTML：我处于最底层
CSS：
h1.alignBtm { line-height: 3em; } h1.alignBtm span { line-height: 1.2em; vertical-align: bottom; }
一个完美的跨浏览器的例子可能是这里的一个：
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来说至关重要。 此外，这应该是第一个标签，没有什么应该出现在它上面。
我发现这个解决方案基于默认的引导启动模板
/* 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; }
#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>
似乎工作：
#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 (eg, <a>) will work without it */ display: inline-block; }
使用较少使解决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
不客气
