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

1161

说我有以下CSS和HTML代码：

#header {
  height: 150px;
}

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

展开摘要

标头部分的高度固定，但是标头内容可能会更改。

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

因此，如果只有一行文本，则将是：

-----------------------------
| 标头标题
|
|
|
| 标头内容（一行）
-----------------------------

如果有三行：

-----------------------------
| 标头标题
|
| 标头内容（是如此
| 完美的很多东西
| 跨越三行）
-----------------------------

如何在CSS中完成此操作？

html css vertical-alignment

— 克里斯托夫
source

1320

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

#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布局吗？

— 克莱图斯
source

4

我实际上在问这里之前就找到了解决方案，但是却以某种方式忘记添加位置：相对；标题div，内容一直降落在页面底部。谢谢

— kristof

15

您可以使用z-index属性管理下拉位置，使其位于最前面。请记住，z-index属性适用于相对或绝对定位的元素。同样，从语义上讲使用表来实现布局结果也是不正确的。

— 亚历杭德罗·加西亚·伊格莱西亚斯

1

对于原始问题中所述的文本内容，＃header-content实际上应该是一个p元素，或者至少是一个元素span

— Josh Burgess 2014年

2

不要将表格用于非表格数据！而是使用CSS显示属性display: table-cell，或table-row或table。您再也不需要使用表进行纯布局。

— 杰里米·莫里茨

1

标头位置相对于什么？

— stack1

158

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

— 帕特里克·麦克埃尔哈尼
source

4

fyi ...这导致我的标头内容折叠其宽度，所以我不得不width = '100%'在标头内容上添加一个

— dsdsdsdsd

2

@dsdsdsdsd您还可以通过将display：block添加到＃header-content来解决此问题。

— Patrick McElhaney 2014年

1

@dsdsdsdsd原因是因为<span>元素display: inline;默认情况下具有，不会占用容器的整个宽度。最合适的解决方法是将范围更改为<div>，默认情况下是一个块元素。

— BadHorsie

1

或者<h1>-<h6>之一（默认情况下也被阻止，并将文本标识为标题），这对搜索引擎，辅助技术和阅读代码的人员很有用。

— Patrick McElhaney '17

当底部的内容具有可变的高度，导致其超出容器范围时，则不起作用。

— Mozfet

125

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

— 李·欧文
source

@bafromca，两个无效的原因。1：使用'align-self'而不是align-items（我的错，我已经编辑了原始帖子）。2：除非父母有身高，否则100％的身高将不起作用。

— 李·欧文

不适用于我，我希望它位于容器的底部，而不是容器中项目的末尾。

— Mozfet

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

— tonygatta

119

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

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

— 约翰汉平
source

42

IE8和更早版本不支持。IE9支持它。

— random_user_name 2012年

23

@cale_b根据caniuse.com，它确实可以在IE8中工作。

— Zach Lysobey

5

@ZachL Happenstance-我正在为企业客户支持IE8中的旧版应用程序，这实际上是可行的。

— Daniel Szabo 2013年

4

@fguillen：也在Chrome（v31）中进行了测试。在那里也可以。

— Daniel Szabo 2013年

5

table-cell打破了很多东西。类似于Bootstrap网格系统。col-md-12不会再为您提供100％宽的div。

— 挪亚

65

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

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

对齐底部内容

— 格雷格
source

几乎完美:)，但不允许自动换行。

— 加斯顿·桑切斯

如果外部容器可以滚动，则无效（overflow-y：自动）。:(

— ecraig12345

我想marin：8px应该是margin：8px

— Graham Perrin

2

如果放在::before规则中也可以使用，从而消除了对多余元素的需求。我们在最后使用了flex，但这在您不能使用时很有用。

— 羊皮的

这是一个非常好的解决方案。仅当将height包装盒/容器及其父代的设置为px或％或其他值时，它才起作用。

— BairDev

38

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

展开摘要

— 贴纸
source

2

我需要我的底部对齐元素仍然存在于文档流中，这在使用时是不可能的position:absolute;。此解决方案非常适合我的情况！

— Swen，

1

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

— Soleil-MathieuPrévot，

1

这是唯一对我有效的解决方案。就像@Soleil提到的那样，它可能与React有关...我不是CSS专家，所以我不确定。

— BK

完全在反应成分

— user1155773

25

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

标记：

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

*确保您处于标准模式

— 道格维格
source

25

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

— 用户3053247
source

2

请注意，旧版浏览器不完全支持 flexbox 。

— AnthonyB

11

@AnthonyB-定义旧吗？作为开发人员，我们必须更改此记录。技术不断发展，旧的根本无法生存。从我所见，IE9和10在flex方面存在问题，但它们分别在2011年和2012年发布……现在是2017年。我们必须放开这些过时和损坏的浏览器。如果不是为了视觉满意，而是为了安全和常规软件更新。

— Tisch

3

@Tisch，您绝对正确，我们作为开发人员必须使用体面的最新技术。但是我只是警告这个兼容性问题，以免感到惊讶。

— AnthonyB

如果下方的内容<h1>位于<p>或<div>我会使用justify-content: space-between。

— agapitocandemor

11

您可以简单地实现弹性

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维玛兰
source

6

如果您有多个动态高度项目，请使用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

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

— 罗米姆
source

5

这是使用flexbox但不使用flex-end进行底部对齐的另一种解决方案。我们的想法是一套margin-bottom关于H1到自动推剩余内容的底部：

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

展开摘要

— Temani Afif
source

完美！gracias

— Grace Nikole

4

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

假设您的数据高度将为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);
}

这里的例子

希望这可以帮助。

— 阿迪亚（Aditya Ponkshe）
source

你能解释一下bottom: -webkit-calc(-100% + x);在做什么吗？

— mhatch '16

@mhatch将页脚放在容器的底部。

— Aditya Ponkshe

4

这是灵活的方法。当然，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;
}

— 绝对的网史密斯
source

4

一个非常简单的单行解决方案是在div中添加行高，同时要记住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

— 巴勃罗·孔特雷拉斯
source

3

如果您可以设置内容的环绕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;
}

显示在codepen上

— 密码小子
source

3

似乎正在工作：

HTML：我在最底层

CSS：

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

— 管理员档案3
source

3

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

当底部内容物的尺寸不固定时，这也会按预期做出反应。

— 莫兹费特
source

3

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

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

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

我正在为一个客户的网站工作，设计要求文本位于某个div的底部。使用这两行代码我已经达到了效果，并且效果很好。同样，如果文本确实扩大了，则填充仍将保持不变。

— 麦克伯克
source

1

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

— Mozfet

2

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

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

}

— XMaster
source

2

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

展开摘要

— 用户名
source

1

这将导致调整顶部div的大小。它适用于基本的文本布局，但是在事物具有背景，颜色和大小值得尊重时不起作用。

— Mozfet

0

尝试：

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

尝试更改％进行修复。例如：120％或90％...等

— 费利克斯
source

可以很好地处理一组内容，但是如果内容更改，则需要对其进行调整。如果是动态内容，请不要使用它！

— Mike Graf

0

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

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

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

— 尼基·汉森
source

1

您的第一个声明padding: 0 30px有点多余，您最好也放padding: 30px其他两个声明。

— 安德鲁（Andrew）

绝对正确，但是我遵循我的工作场所惯例。

— 尼基·汉森

6

真的？这似乎是普通的不良做法。只需使用速记，或在任何地方都明确。padding: 60px 30px 8px;、、padding: 60px 30px 8px 30px;四个明确的padding-规则，甚至@TheWaxMann的建议都比较出色-我愿意并能够提出一个;-)

— Zach Lysobey 2013年

-3

一个完美的跨浏览器示例可能就是以下示例：

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上工作至关重要。同样，这应该是第一个标签，并且上面没有任何内容。

— 假货
source

28

由于您将文档声明为严格的XHTML，因此您还应该自动关闭<br />标签...

— Amos M. Carpenter

7

@KarlKildén，如果您指的是aaamos的注释，那绝对不是一个愚蠢的注释-以正确的content-type标头提供上述文档会导致浏览器抛出xml解析错误。

— Razor 2012年

7

这是一个坏习惯！改用CSS！

— m93a

-4

似乎正在工作：

#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。当您仅需更改一个参数即可更改整个布局（不破坏它：）时，这是一种真正的荣幸。

— 特别是
source

-7

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

别客气

— waza123
source

3

表格布局可能会出现问题；建议使用CSS。HTML5中也不支持valign属性。（见w3schools.com/tags/att_td_valign.asp）

— undeniablyrob