如何将div的内容与底部对齐答案

【问题标题】：How to align content of a div to the bottom如何将div的内容与底部对齐
【发布时间】：2010-10-09 19:32:07
【问题描述】：

假设我有以下 CSS 和 HTML 代码：

#header {
  height: 150px;
}

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

标题部分是固定高度，但标题内容可能会发生变化。

我希望标题的内容与标题部分的底部垂直对齐，因此最后一行文本“粘”在标题部分的底部。

所以如果只有一行文字，会是这样的：

----------------------------------------- |标题 | | | |标题内容（产生一行） -----------------------------------------

如果有三行：

如何在 CSS 中做到这一点？

【问题讨论】：

标签： html css vertical-alignment

【解决方案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?

【讨论】：

我实际上在问here之前找到了该解决方案，但不知何故忘记添加位置：relative;到标题 div 并且内容一直停留在页面底部。谢谢
您可以使用 z-index 属性管理您的下拉位置，将其置于最前面。请记住，z-index 属性适用于相对或绝对定位的元素。此外，从语义上讲，使用表格来实现布局结果也是不正确的。
在原始问题中描述的文本内容的情况下，#header-content 应该是一个p 元素，或者至少是一个span
不要将表格用于非表格数据！而是使用 CSS 显示属性 display: table-cell、table-row 或 table。您再也不需要使用表格进行纯布局了。
标题位置是相对于什么？

【解决方案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/

【讨论】：

@bafromca，两个不起作用的原因。 1：使用'align-self'而不是align-items（我的错，我编辑了我的原始帖子）。 2：除非父母有高度，否则 100% 高度将不起作用。
对我不起作用，我希望它位于容器的底部，而不是容器中项目的末尾。
2020年这应该是正确答案：caniuse.com/#feat=flexbox
我认为这是比相对绝对更好的答案，它更灵活

【解决方案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 noted，您需要确定标头内容才能完成这项工作。

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

【讨论】：

fyi ...这导致我的标题内容折叠它的宽度，所以我不得不在标题内容上添加一个width = '100%'
@dsdsdsdsd 您也可以通过将 display:block 添加到 #header-content 来解决此问题。
@dsdsdsdsd 原因是因为<span>元素默认有display: inline;，不占容器全宽。最合适的解决方法是将跨度更改为<div>，默认情况下这是一个块元素。
或
-
之一，默认情况下也被阻止并将文本标识为标题，这对搜索引擎、辅助技术和阅读代码的人很有用。跨度>
当底部的内容高度可变时不起作用，导致它超出容器边界。

【解决方案4】：

我使用了这些属性并且它有效！

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

【讨论】：

IE8 及更早版本不支持。 IE9 支持。
@cale_b 根据caniuse.com，它DOES在IE8中工作。
@ZachL Happenstance - 我正在为企业客户支持 IE8 中的旧版应用程序，这确实有效。
@fguillen：刚刚也在 Chrome (v31) 中进行了测试。也可以在那里工作。
table-cell 破坏了很多东西。就像 Bootstrap 网格系统一样。 col-md-12 不会再给你一个 100% 宽的 div。

【解决方案5】：

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

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

【讨论】：

几乎完美 :) 但它不允许自动换行。
如果外部容器可以滚动则不起作用（溢出-y：自动）。 :(
我猜 marin:8px 应该是 margin:8px
如果加入::before 规则也可以，这样就不需要额外的元素。我们最后使用了 flex，但是当你不能使用时这很有用。
这是一个非常好的解决方案。它仅在盒子/容器的height 和设置（设置为 px 或 % 或其他任何值）时才有效。

【解决方案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 */
}

&lt;section&gt;Some text aligns to the bottom&lt;/section&gt;

【讨论】：

我需要我的底部对齐元素仍然存在于文档流中，这在使用 position:absolute; 时是不可能的。这个解决方案非常适合我的情况！
内部反应组件，这是正确的解决方案。接受的解决方案失败。
这是唯一对我有用的解决方案。正如@Soleil 所提到的，也许它与 React 有关......我不是 CSS 专家，所以我不完全确定。
在反应组件中完美运行
在反应中起作用。您可以使用justify-content: center; 使文本底部居中。

【解决方案7】：

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

【讨论】：

请注意，旧浏览器中的 flexbox 不是 well supported。
@AnthonyB - 定义旧的？作为开发人员，我们必须改变这个记录。技术向前发展，旧的根本无法生存。据我所知，IE9 和 10 的 flex 存在问题，但它们分别于 2011 年和 2012 年发布……现在是 2017 年。我们必须放弃这些过时和损坏的浏览器。如果不是为了视觉上的满足，而是为了安全和一般软件更新。
@Tisch 你说得对，作为开发人员，我们必须使用像样的最新技术。但我只是警告这个兼容性问题，以免感到惊讶。
如果<h1> 下的内容在<p> 或<div> 内，我会使用justify-content: space-between。

【解决方案8】：

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

标记：

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

*确保您处于标准模式

【讨论】：

【解决方案9】：

你可以简单的实现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>

【讨论】：

【解决方案10】：

您可以使用以下方法：

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

【讨论】：

【解决方案11】：

这是另一种使用 flexbox 但不使用 flex-end 进行底部对齐的解决方案。想法是将 h1 上的 margin-bottom 设置为 auto 以将剩余内容推到底部：

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

【讨论】：

迄今为止最好的解决方案！因为它支持overflow-y: auto（其他解决方案不支持）。
margin-top: auto 的绝佳解决方案。

【解决方案12】：

如果您有多个动态高度项，请使用表格和表格单元格的 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

该演示还有一个示例，如何使用相同的技术进行垂直居中对齐。

【讨论】：

【解决方案13】：

将 div 移到底部的最佳解决方案如下。基本上，您需要做的是将 display flex 和 flex-direction 设置为父级的列，并为其子级添加一个“margin-top：auto”，该子级需要浮动到容器的底部注意：我使用过 bootstrap 及其类。

.box-wrapper {
  height: 400px;
  border: 1px solid #000;
  margin: 20px;
  display: flex; // added for representation purpose only. Bootstrap default class is already added
  flex-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>

【讨论】：

【解决方案14】：

所有这些答案都对我有用...我不是 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>

当底部内容的大小不固定时，即使容器大小不固定，也会按预期做出反应。

【讨论】：

【解决方案15】：

你不需要绝对+相对。很有可能使用容器和数据的相对位置。你就是这样做的。

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

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

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

HTML 会是这样的

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

Live example here

希望这会有所帮助。

【讨论】：

你能解释一下bottom: -webkit-calc(-100% + x);在做什么吗？
@mhatch 它将页脚保留在容器底部。

【解决方案16】：

这是执行此操作的灵活方式。当然，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;
}

【讨论】：

【解决方案17】：

一个非常简单的单行解决方案是在 div 中添加 line-heigth，记住所有 div 的文本都会放在底部。

CSS：

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

HTML：

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

请记住，当您只希望 div 中的文本向下移动时，这是一种实用且快速的解决方案，如果您需要组合图像和内容，您将不得不编写更复杂和响应式的 CSS 代码

【讨论】：

【解决方案18】：

对提到的其他弹性盒解决方案的补充：

您可以在第一个 div 上使用flex-grow: 1。这样，您的第二个 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/

【讨论】：

【解决方案19】：

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

HTML

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

show on codepen

【讨论】：

【解决方案20】：

我发现此解决方案基于默认引导启动模板

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

}

【讨论】：

【解决方案21】：

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

【讨论】：

这会导致顶部 div 的大小调整。这适用于基本的文本布局，但在需要考虑背景、颜色和大小时不起作用。

【解决方案22】：

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

设置标题 div 的高度。然后在其中设置H1 标签的样式，如下所示：

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

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

【讨论】：

在使用响应式布局调整屏幕大小时会导致内容浮动在其他内容之上。

【解决方案23】：

尝试：

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

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

【讨论】：

使用 1 组内容完全可以正常工作，但如果内容发生变化，则需要进行调整。如果是动态内容，那就不要用这个了！

【解决方案24】：

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

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

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

【讨论】：

你的第一个声明 padding: 0 30px 有点多余，你不妨把 padding: 30px 然后放在另外两个声明。
绝对正确，但是我正在遵循我工作场所的做法。
真的吗？这似乎是普通的坏做法。只需使用速记，或在任何地方都明确。 padding: 60px 30px 8px;、padding: 60px 30px 8px 30px;、四个明确的padding- 规则，甚至@TheWaxMann 的建议都是优越的 - 我愿意并且能够争辩说一个;-)

【解决方案25】：

似乎正在工作：

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

使用less 使解决 CSS 难题更像是编码而不是像......我只是喜欢 CSS。当您只需更改一个参数即可更改整个布局（而不破坏它:)，这是一种真正的乐趣。

【讨论】：

【解决方案26】：

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

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

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

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

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

【讨论】：

由于您将文档声明为严格的 XHTML，您还应该自行关闭您的 <br /> 标签...
@KarlKildén 如果您指的是来自 aaamos 的评论，那绝对不是愚蠢的评论 - 使用其 correct content-type header 提供上述文档会导致浏览器抛出 xml 解析错误。
这是一种不好的做法！改用 CSS！

【解决方案27】：

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>

http://codepen.io/anon/pen/qERMdx

欢迎您

【讨论】：

这样的表格布局可能有问题；建议改为使用 CSS。 HTML5 也不支持 valign 属性。（见w3schools.com/tags/att_td_valign.asp）

-

之一，默认情况下也被阻止并将文本标识为标题，这对搜索引擎、辅助技术和阅读代码的人很有用。跨度>