如何将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 {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">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div></div>

但你可能会遇到问题。当我尝试它时，我遇到了内容下方出现下拉菜单的问题。它只是不漂亮。

老实说，对于垂直居中问题，以及项目的任何垂直对齐问题都不是固定高度，使用表格更容易。

示例：您可以在不使用表格的情况下执行此超文本标记语言布局吗？

小开

我使用这些属性，它工作！

#header {display: table-cell;vertical-align: bottom;}

小开

我设计了一种比上面提到的简单得多的方法。

设置标题div的高度。然后在里面，按如下方式设置H1标记的样式：

float: left;padding: 90px 10px 11px

我正在为客户开发一个网站，设计要求文本位于某个div的底部。我使用这两行实现了结果，效果很好。此外，如果文本确实展开，填充仍然保持不变。

小开

一个完美的跨浏览器示例可能是这里的这个：

http://www.csszengarden.com/?cssfile=/213/213.css&； page=0

这个想法是既要在底部显示div，又要让它粘在那里。通常简单的方法会让粘性div与主要内容一起向上滚动。

以下是一个完全工作的最小示例。请注意，不需要div嵌入技巧。许多BRs只是为了强制显示滚动条：

<!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上运行至关重要。此外，这应该是第一个标签，它上面不应该出现任何内容。

小开

如果父/块元素的行高大于行内元素的行高，则可以将行内或行内块元素对齐到块级元素的底部。*

置标：

<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;}

*确保您处于标准模式

小开

似乎正在工作：

#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。当你只需更改一个参数就可以更改整个布局（而不会破坏它：）时，这是一种真正的乐趣。

小开

尝试：

div.myclass { margin-top: 100%; }

尝试更改%以修复它。示例：120%或90%…等。

小开

我刚刚为客户端做的网站要求页脚文本是一个高框，底部的文本我用简单的填充实现了这一点，应该适用于所有浏览器。

<div id="footer">some text here</div>

#footer {padding: 0 30px;padding-top: 60px;padding-bottom: 8px;}

小开

如果您有多个动态高度项，请使用table和table-cell的CSS显示值：

超文本标记语言

<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

该演示还提供了一个如何使用相同技术垂直居中对齐的示例。

小开

如果您可以设置内容的包装div的高度（如其他回复中所示的#Header-content），而不是整个#head，也许您也可以尝试这种方法：

超文本标记语言

<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上显示

小开

在这个问题上挣扎了一段时间后，我终于找到了一个满足我所有要求的解决方案：

不要求我知道容器的高度。
与相对+绝对解决方案不同，内容不会浮动在自己的层中（即，它通常嵌入在容器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;}

超文本标记语言：

<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%;}

然后将子元素的line-self设置为flex-end。

span.child {display: inline-block;align-self: flex-end;}

这是我用来学习的资源：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

小开

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>

你的欢迎

小开

您不需要绝对+相对。容器和数据都可以使用相对位置。这就是您的做法。

假设您的数据高度将是x。您的容器是相对的，页脚也是相对的。您所要做的就是添加到您的数据中

bottom: -webkit-calc(-100% + x);

您的数据将始终位于容器的底部。即使您有具有动态高度的容器也有效。

超文本标记语言是这样的

<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;}

小开

我在默认的引导启动模板上找到了这个解决方案

/* 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;
}

小开

现代的方法是使用弹性框。参见下面的示例。您甚至不需要将Some text...包装到任何超文本标记语言中，因为直接包含在flex容器中的文本包装在匿名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>

如果只有一些文本，并且您希望与容器底部垂直对齐。

section {border: 1px solid blue;height: 150px;display: flex;                   /* defines flexbox */align-items: flex-end;           /* bottom of the box */}

<section>Some text aligns to the bottom</section>

小开

display: flex;align-items: flex-end;

小开

#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>

小开

这是另一个使用flexbox但不使用柔性端进行底部对齐的解决方案。想法是在h1上设置margin-bottom到汽车以将剩余内容推送到底部：

#header {height: 350px;display:flex;flex-direction:column;border:1px solid;}
#header h1 {margin-bottom:auto;}

<div id="header"><h1>Header title</h1>Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)</div>

我们也可以对文本上的margin-top:auto执行相同的操作，但在这种情况下，我们需要将其包装在div或span中：

#header {height: 350px;display:flex;flex-direction:column;border:1px solid;}
#header span {margin-top:auto;}

<div id="header"><h1>Header title</h1><span>Header content (one or multiple lines)</span></div>

小开

一个非常简单的单行解决方案是向div添加line-heigth，记住所有div的文本都将触底。

css：

#layer{width:198px;height:48px;line-height:72px;border:1px #000 solid}#layer a{text-decoration:none;}

超文本标记语言：

<div id="layer"><a href="#">text at div's bottom.</a></div>

请记住，这是一个实用且快速的解决方案，当你只想让div中的文本下降时，如果你需要组合图像和东西，你将不得不编写更复杂和响应更快的CSS

小开

您可以简单地实现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>

小开

所有这些答案都不适合我……我不是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>

当底部内容物没有固定尺寸时，也当容器没有固定尺寸时，这会像预期的那样反应。

小开

您可以使用以下方法：

.header-parent {height: 150px;display: grid;}
.header-content {align-self: end;}

<div class="header-parent"><h1>Header title</h1><div class="header-content">Header content</div></div>

小开

除了提到的其他flex-box解决方案之外：

您可以在第一个div上使用flex-grow: 1。这样，您的第二个div将与底部对齐，而第一个div将覆盖所有剩余空间。

在父div上，您必须使用display: flex和flex-direction: column。

/* parent-wrapper div */.container {display: flex;flex-direction: column;}
/* first-upper div */.main {flex-grow: 1;}

检查小提琴：https://jsfiddle.net/1yj3ve05/

小开

将div移动到底部的最佳解决方案如下。基本上，您需要做的是将显示flx和flex-方向设置为父级的列，并为其子级添加一个“边缘顶部：自动”，该子级需要浮动到容器的底部注意：我使用了bootstrap及其类。

.box-wrapper {height: 400px;border: 1px solid #000;margin: 20px;display: flex; // added for representation purpose only. Bootstrap default class is already addedflex-direction: column;}
.link-02 {margin-top: auto;}

<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>incidunt blanditiis debitis</div><div class="news-box"><img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150"><p>Labore consectetur doloribus qui ab et qui aut facere quos.</p></div><a href="https://oscar.com" target="_blank" class="link-02">This is moved to bottom with minimal effort</a></div>

小开

我已经遇到这个问题好几次了，有很好的解决方案，但也有不太好的解决方案。所以你可以用flexbox、网格系统或显示表的不同方式来实现这一点。我的首选变体是flex和“边界底部：自动”的混合。这是我个人收集的文本底部可能性：

1. Flex/边界顶部：自动；

.parent {min-height: 200px;background: green;display: flex;}
.child {margin-top: auto;background: red;padding:5px;color:white;}

<div class="parent"><div class="child">Bottom text</div></div>

2. Flex/line-self： flex-end

.parent {display: flex;min-height: 200px;background: green;}
.child {align-self: flex-end;background: red;padding: 5px;color: white;}

<div class="parent"><div class="child">Bottom text</div></div>

3. Flex-end；

.parent {min-height: 200px;background: green;display: flex;align-items: flex-end;}
.child {padding: 5px;background: red;color: white;}

<div class="parent"><div class="child">Bottom text</div></div>

4. Grid/line-self： end；

.parent {min-height: 200px;background: green;display: grid;}
.child {align-self: end;background: red;padding:5px;color:white;}

<div class="parent"><div class="child">Bottom text</div></div>

5.表/垂直对齐：底部；

我不喜欢这种桌子的方式。

.parent {min-height: 200px;background: green;display: table;width:100%;}
.child {display: table-cell;vertical-align: bottom;background: red;padding:5px;color:white;}

<div class="parent"><div class="child">Bottom text</div></div>

带垫片

6. Flex；/flex： 1；

.parent {min-height: 200px;background: green;display: flex;flex-flow: column;}
.spacer {flex: 1;}.child {padding: 5px;background: red;color: white;}

<div class="parent"><div class="spacer"></div><div class="child">Bottom text</div></div>

7. Flex/flex-增长：1；

.parent {min-height: 200px;background: green;display: flex;flex-direction: column;}
.spacer {flex-grow: 1;}
.child {padding: 5px;background: red;color: white;}

<div class="parent"><div class="spacer"></div><div class="child">Bottom text</div></div>

8.内联块/伪类::bef矿石

.parent {min-height: 200px;background: green;}
.child::before {display:inline-block;content:'';height: 100%;vertical-align:bottom;}
.child {height:200px;padding: 5px;background: red;color: white;  
}

<div class="parent"><div class="child">Bottom text</div></div>

❤️我个人的首选版本是：1.