如何将div中的内容对齐到底部

Question

假设我有以下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实现呢？

- kristof

Answer 1

相对定位+绝对定位是最佳选择：

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

但您可能会遇到问题。当我尝试时，我发现下拉菜单出现在内容下面。这不太美观。

老实说，对于垂直居中问题以及任何项目的垂直对齐问题，如果它们没有固定高度，使用表格会更容易。

例如：Can you do this HTML layout without using tables?

- cletus

---

在询问这里之前，我实际上已经找到了解决方案，但是不知怎么忘记在标题div中添加position: relative;，导致内容一直落在页面底部。谢谢！ - kristof

使用z-index属性可以管理下拉菜单的位置并将其置于最前面。请记住，z-index属性与相对或绝对定位的元素一起使用。此外，从语义上讲，使用表格来实现布局结果是不正确的。 - Alejandro García Iglesias

在原始问题所描述的文本内容情况下，#header-content 应该是一个 p 元素，或者至少是一个 span。 - Josh Burgess

不要在非表格数据中使用表格！相反，使用CSS显示属性display: table-cell、table-row或table。你再也不需要纯粹地使用表格进行布局了。 - Jeremy Moritz

标题位置相对于什么？ - stack1

Answer 2

如果您不担心旧版浏览器，请使用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/

- Lee Irvine

---

@bafromca，这不起作用的两个原因。1：使用'align-self'而不是'align-items'（我的错，我已编辑了我的原始帖子）。2：除非父元素有高度，否则100％的高度不起作用。 - Lee Irvine

对我没用，我想把它放在容器底部，而不是容器中项目的末尾。 - Mozfet

在2020年，这应该是正确的答案：https://caniuse.com/#feat=flexbox - tonygatta

太棒了，flex-end功能正是我正在寻找的！谢谢！ - undefined

是的，这确实是一个更可取的解决方案。在不同的浏览器中可能会有所不同，但似乎弹性盒模型几乎总是最好的选择。很高兴我找到了这个。 - undefined

Answer 3

使用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>

- Patrick McElhaney

---

了解。这导致我的标题内容宽度崩溃，所以我不得不在标题内容上添加width='100％'。 - dsdsdsdsd

@dsdsdsdsd 你也可以通过将display:block添加到#header-content来修复它。 - Patrick McElhaney

@dsdsdsdsd 的原因是因为 <span> 元素默认具有 display: inline; 属性，这不会占据容器的全部宽度。最合适的解决方法是将 span 更改为 <div>，因为 div 默认是块级元素。 - BadHorsie

或者使用<h1>到<h6>中的任意一个，它们默认为块级元素，并将文本标识为标题，这对于搜索引擎、辅助技术和阅读代码的人非常有用。 - Patrick McElhaney

当底部内容具有可变高度时，会导致其超出容器边界，从而无法正常工作。 - Mozfet

Answer 4

我使用这些属性，它有效！

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

- Tam Mai

---

不支持IE8及更早版本，但支持IE9。 - random_user_name

根据 caniuse.com，它在 IE8 中是可以工作的。 - Zach Lysobey

“@ZachL Happenstance - 我正在为一家企业客户支持一个在IE8上的遗留应用程序，这个确实可以工作。” - Daniel Szabo

刚刚我在Chrome（v31）上测试过了，也可以正常运行。 - Daniel Szabo

table-cell 会破坏很多东西，比如 Bootstrap 栅格系统。使用 col-md-12 将无法使 div 宽度占据整个屏幕。 - Noah

Answer 5

在困扰了一段时间之后，我终于找到了符合所有要求的解决方案：

• 不需要知道容器的高度。
• 与相对+绝对定位的解决方案不同，内容不会浮动在自己的层中（即它正常嵌入容器div中）。
• 能够在各种浏览器上工作（IE8+）。
• 实现简单。

这个解决方案只需要一个被称为“aligner”的<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:

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>

- Greg Prisament

---

几乎完美 :) 但它不允许自动换行。 - Gaston Sanchez

如果外部容器可以滚动（overflow-y: auto），则无法正常工作。 :( - ecraig12345

这也适用于放在::before规则中，这样就不需要额外的元素了。我们最后使用了flex，但在无法使用时，这很有用。 - Sheepy

这是一个非常好的解决方案。它只在盒子/容器及其父元素的height（高度）被设置（以像素或百分比等单位）时才有效。 - BairDev

Answer 6

现代的方法是使用flexbox。见下面的示例。您甚至不需要将 Some text... 包装在任何HTML标记中，因为直接包含在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>

- Stickers

---

我需要我的底部对齐元素仍然存在于文档流中，但使用position:absolute;不可能实现。这个解决方案完美地解决了我的问题！ - Swen

在React组件内，这是正确的解决方案。已接受的解决方案失败了。 - Soleil

适用于React。您可以使用justify-content: center;将文本置于底部中心位置。 - Eugene

Answer 7

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

- user3053247

---

请注意，旧版浏览器不太支持flexbox（http://caniuse.com/#feat=flexbox）。 - AnthonyB

@AnthonyB - “define old?” 我们作为开发人员需要改变这个记录。技术在不断进步，老旧的东西无法适应。根据我所看到的信息，IE9和10使用flex会出现问题，而它们分别是在2011年和2012年发布的... 现在已经是2017年了。我们必须放弃这些过时和有缺陷的浏览器，这不仅是为了外观上的满意度，更是为了安全性和一般软件更新。 - Tisch

@Tisch，你说得很对，作为开发者，我们必须使用合适和最新的技术。但我只是想提醒一下兼容性问题，以免出现意外情况。 - AnthonyB

如果<h1>下的内容在<p>或<div>中，我会使用justify-content: space-between。 - agapitocandemor

这个问题的唯一答案。 - Alfred Huang

Answer 8

我已经多次遇到这个问题，有好的解决方案，也有不太好的。你可以通过flexbox、grid系统或display table来实现。我更喜欢一种混合使用flex和'margin-bottom: auto'的方式。下面是我个人收集的text-bottom可能性：

1. Flex / margin-top: auto;

.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. 伸缩布局 / align-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. 弹性布局 / align-items: 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. 网格 / align-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. 表格 / vertical-align: bottom;

个人而言，我不喜欢使用表格的这种方法。

.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. 弹性盒子; / 弹性盒子: 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-grow: 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. 内联块元素 / 伪类::before

.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、2和3。

- Maik Lowrey

Answer 9

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

标记：

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

层叠样式表：

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

确保您处于标准模式

- dougwig

Answer 10

您可以轻松实现弹性布局。

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>

- MK Vimalan