题 如何将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中完成?


957
2018-02-25 13:15


起源




答案:


相对+绝对定位是您最好的选择:

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

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

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

例: 你可以在不使用表格的情况下进行HTML布局吗?


1138
2018-02-25 13:20



我实际上在问这里之前找到了解决方案,但不知何故忘了添加位置:relative;标题div和内容保持着陆在页面底部。谢谢 - kristof
您可以使用z-index属性管理下拉列表位置以将其置于最前面。请记住,z-index属性适用于相对或绝对定位的元素。另外,从语义上讲,使用表来实现布局结果是不正确的。 - Alejandro García Iglesias
在原始问题中描述的文本内容的情况下,#header-content应该是一个 p 元素,或者至少是一个 span - Josh Burgess
不要将表用于非表格数据!而是使用CSS显示属性 display: table-cell, 要么 table-row, 要么 table。您再也不需要使用表格进行纯布局。 - Jeremy - DeerAngel-org
标题位置是相对于什么的? - stack1


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

克莱图斯 注意,您需要识别标头内容才能使其正常工作。

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

134
2018-02-25 13:18



fyi ...这导致我的标题内容崩溃其宽度,所以我不得不添加一个 width = '100%' 在标题内容上 - dsdsdsdsd
@dsdsdsdsd你也可以通过将display:block添加到#header-content来解决这个问题。 - Patrick McElhaney
@dsdsdsdsd原因是因为 <span> 元素有 display: inline; 默认情况下,它不占用容器的整个宽度。最合适的解决方法是将跨度更改为a <div>,默认为块元素。 - BadHorsie
或者<h1> - <h6>中的一个,默认情况下也是块,并将文本标识为标题,这对搜索引擎,辅助技术和阅读代码的人员非常有用。 - Patrick McElhaney


我使用这些属性,它的工作原理!

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

100
2018-04-25 09:43



IE8及更早版本不支持。 IE9支持它。 - cale_b
看起来不适用于Chrome:/ - fguillen
@cale_b根据 caniuse.com 它 DOES 在IE8中工作。 - Zach Lysobey
@ZachL Happenstance - 我正在为企业客户支持IE8中的遗留应用程序 事实上确实如此 工作。 - Daniel Szabo
@fguillen:刚刚在Chrome(v31)中测试过。也在那里工作。 - Daniel Szabo


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


76
2017-08-25 20:46



我不能让它工作...... codepen.io/anon/pen/rgldC?editors=110 - bafromca
@bafromca,两个不起作用的原因。 1:使用'align-self'而不是align-items(我的错,我编辑了我的原帖)。 2:100%高度不起作用,除非父母有高度。 - Lee Irvine
很棒的解决方案! - Timothy Gonzalez


经过一段时间的努力,我终于找到了满足我所有要求的解决方案:

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

Align bottom content


62
2017-07-18 17:11



几乎完美:)但它不允许自动换行。 - Gaston Sanchez
好的代码,我用它制作了一个JSFiddle: jsfiddle.net/b48xs5r2 - ReeCube
如果外部容器可以滚动(overflow-y:auto),则不起作用。 :( - ecraig12345
我猜可能是 马林:8像素 应该 保证金:8像素 - Graham Perrin
这也适用于如果放入 ::before 规则,它消除了额外元素的需要。我们最后使用了flex,但是当你做不到时,这很有用。 - Sheepy


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

标记:

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

*确保您处于标准模式


22
2017-12-04 22:16





现代化的方法是使用 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>


22
2017-11-24 02:53



我需要我的底部对齐元素仍然存在于文档流中,这在使用时是不可能的 position:absolute;。这个解决方案适合我的情况! - Swen
内部反应组件,这是正确的解决方案。接受的解决方案失败了 - Soleil
这是唯一对我有用的解决方案。也许它与React有关,正如@Soleil所提到的......我不是CSS专家,所以我不完全确定。 - B.K.