如何将 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>

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

坦率地说,对于垂直居中问题以及项目的垂直对齐问题不是固定高度,使用表格会更容易。

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

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

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

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

  • 不需要我知道容器的高度。
  • 与相对 + 绝对解决方案不同,内容不会浮动在其自己的层中(即,它通常嵌入容器 div 中)。
  • 可跨浏览器(IE8 +)使用。
  • 易于实现。

该解决方案只需要一个<div> ,我称之为 “aligner”:

的 CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

此技巧通过创建一个又高又瘦的 div 来起作用,该 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 。请参见下面的示例。您甚至不需要将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>

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

标记:

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

* 确保您处于标准模式

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

您可以简单地实现弹性

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>

如果您有多个动态高度项目,请使用 table 和 table-cell 的 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

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