如何使一个div的内容，用CSS的底部？ [英] How to align content of a div to the bottom with css?
问题描述
说我有下面的CSS和HTML code：
的#header {
高度：150像素;
}
＆LT;身体GT;
＆LT; DIV ID =头＆GT;
＆LT; H1＆GT;标题标题＆LT; / H1＆GT;
头内容（一个或多个行）
＆LT; / DIV＆GT;
＆LT; DIV ID =内容＆GT;
唧唧歪歪
＆LT; / DIV＆GT;
＆LT; /身体GT;
标题部分是固定的高度，而是在报头内容可能会改变。 我想的标题的内容，以垂直对齐到头部部分的底部，所以文枝中的最后一行到标题部分的底部。
所以，如果只有一行文字，这将是这样的：
-----------------------------
|标题标题
|
|
|
|头内容（导致一行）
-----------------------------
唧唧歪歪
如果有三行：
-----------------------------
|标题标题
|
|头内容（这是如此
|太多的东西，它完美
|跨越三线）
-----------------------------
唧唧歪歪
如何在CSS中这样做？
相对+绝对定位是你最好的选择：
的#header {
位置：亲属;
最小高度：150像素;
}
＃标题内容{
位置：绝对的;
底部：0;
左：0;
}
＆LT; DIV ID =头＆GT;
＆LT; H1＆GT;标题＆LT; / H1＆GT;
＆LT; DIV ID =头内容＆GT;有的含量小于/ DIV＆GT;
＆LT; / DIV＆GT;
不过，您可能会遇到与该问题。当我尝试它，我有问题，出现下面的内容下拉菜单。它只是没有pretty的。
老实说，对于垂直居中的问题，那么，随着项目的垂直对齐的问题是不固定的高度，它更容易只是使用表。
例如：<一href="http://stackoverflow.com/questions/522928/can-you-do-this-html-layout-without-using-tables">Can你这样做HTML布局而无需使用表？
Say I have the following CSS and HTML code:
#header {
height: 150px;
}
<body>
<div id="header">
<h1>Header title</h1>
header content (one or multiple lines)
</div>
<div id="content">
bla bla bla
</div>
</body>
The header section is of fixed height but the header content may change. I would like to content of the header to be vertically aligned to the bottom of the header section, so the last line of text "sticks" to the bottom of the header section.
So if there is only one line of text it would be like:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
bla bla bla
And if there were three lines:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
bla bla bla
How can this be done in CSS?
Relative+absolute positioning is your best bet:
#header {
position: relative;
min-height: 150px;
}
#header-content {
position: absolute;
bottom: 0;
left: 0;
}
<div id="header">
<h1>Title</h1>
<div id="header-content">Some content</div>
</div>
But you may run into issues with that. When I tried it I had problems with dropdown menus appearing below the content. It's just not pretty.
Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren't fixed height, it's easier just to use tables.
Example: Can you do this HTML layout without using tables?
这篇关于如何使一个div的内容，用CSS的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
