关于HTML：如何将DIV的内容与底部对齐？


How to align content of a div to the bottom?

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

1
2
3
#header {
  height: 150px;
}
1
2
  Header title
  Header content (one or multiple lines)

收割台部分是固定高度，但收割台内容可能会更改。我希望标题的内容垂直对齐到标题部分的底部，这样最后一行文本"粘"到标题部分的底部。

因此，如果只有一行文本，它应该是：

1
2
3
4
5
6
7
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

如果有三条线：

1
2
3
4
5
6
7
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

如何在CSS中完成此操作？

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
1
2
  Title
  Some content

但你可能会遇到一些问题。当我尝试的时候，我遇到了下拉菜单出现在内容下面的问题。只是不漂亮。

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

示例：您可以在不使用表的情况下进行这种HTML布局吗？

相关讨论

使用CSS定位。

1
2
3
4
5
6
7
8
9
10
/* 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所指出的，您需要标识头部内容才能使其工作。

1
2
3
4
<span id="header-content">some header content</span>

                                             
    bottom
相关讨论

我使用这些属性，它就工作了！

1
2
3
4
#header {
  display: table-cell;
  vertical-align: bottom;
}
相关讨论

如果您不担心传统浏览器，请使用flexbox。

父元素需要将其显示类型设置为flex

1
2
3
4
div.parent {
  display: flex;
  height: 100%;
}

然后将子元素的"自我对齐"设置为"柔性端"。

1
2
3
4
span.child {
  display: inline-block;
  align-self: flex-end;
}

以下是我用来学习的资源：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

相关讨论

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

  • 不要求我知道集装箱的高度。
  • 与相对+绝对解不同，内容不会在自己的层中浮动(即，它通常嵌入在container div中)。
  • 跨浏览器工作(IE8+)。
  • 易于实现。

解决方案只需要一个，我称之为"校准器"：

CSS

1
2
3
4
5
6
.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

HTML

1
... Your content here ...

这个技巧是通过创建一个高的、瘦的DIV来实现的，它将文本基线推到容器的底部。

下面是一个完整的例子，它实现了OP所要求的。我把"底部对齐器"做得又厚又红，只是为了演示。

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
 
   
      This text
       is on top.
   
   
     
     
        I like it here
         at the bottom.
     
   
 
</body>

Align bottom content

相关讨论

现代的方法是使用flexbox。请参见下面的示例。您甚至不需要将Some text...包装到任何HTML标记中，因为直接包含在flex容器中的文本包装在匿名flex项中。

1
2
3
4
5
6
7
8
9
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;
}
1
2
3
4
<header>
  Header title
  Some text aligns to the bottom
</header>

如果只有一些文本，并且您希望与容器底部垂直对齐。

1
2
3
4
5
6
section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}
1
<section>Some text aligns to the bottom</section>

相关讨论

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

标记：

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

CSS：

1
2
3
4
5
6
7
h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

*确保您处于标准模式

1
2
display:&nbsp;flex;
align-items:&nbsp;flex-end;
相关讨论

你可以简单地实现弹性

1
2
3
4
5
6
7
8
9
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;
}
1
2
3
4
<header>
  Header title
  Some text aligns to the bottom
</header>

如果有多个动态高度项，请使用表格和表格单元格的CSS显示值：

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<body>

 
   

      my bottom aligned div 1
      my bottom aligned div 2
      my bottom aligned div 3

   
 

</body>
</html>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

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

一个非常简单的一行解决方案是向DIV添加行高，记住所有DIV的文本都将放在底部。

CSS：

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

HTML：

1
    text at div's bottom.

请记住，这是一个实用且快速的解决方案，当您只想让DIV中的文本下降时，如果您需要将图像和内容组合在一起，则需要编写一个更复杂、响应速度更快的CSS。

相关讨论

这是一个灵活的方法。当然，IE8不支持它，因为7年前用户需要它。根据您需要支持的内容，可以去掉其中一些。

不过，如果有一种方法可以做到这一点，而不需要外部容器，只需让文本在自己的内部对齐即可。

1
2
3
4
5
6
7
8
9
10
11
#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;
}

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

1
2
3
4
5
6
7
8
9
10
#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}
1
2
  Header title
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)

我们也可以对文本中的margin-top:auto执行相同的操作，但在这种情况下，我们需要将其包装在div或span中：

1
2
3
4
5
6
7
8
9
10
#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}
1
2
  Header title
  <span>Header content (one or multiple lines)</span>

相关讨论

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

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

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

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

HTML将像这样

1
 

CSS将像这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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);
}

此处为实况示例

希望这有帮助。

相关讨论

我知道这已经2岁多了，但我设计了一种比上面提到的要简单得多的方法。

设置标题分区的高度。然后在该分区内，设置h1标记的样式，如下所示：

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

我在一个客户的网站上工作，设计要求文本位于某个分区的底部。我已经用这两行实现了结果，而且效果很好。此外，如果文本确实展开，填充将保持不变。

如果您可以设置内容的包装分区的高度(header content，如其他人的回复所示)，而不是整个header，那么您也可以尝试以下方法：

HTML

1
2
3
4
5
6
7
    some title
   
        <span>
            first line of header text
            second line of header text
            third, last line of header text
        </span>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

科廷展

1
2
3
4
5
6
7
8
9
10
11
12
13
#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}  


    <h1 class="top">Header title
    Header content (one or multiple lines)

1
2
3
4
5
6
7
8
9
10
#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}
1
2
    <h1 class="top">Header title
    Header content (one or multiple lines)

似乎在工作：

HTML：我在最底层

CSS：

1
2
3
4
5
6
7
h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* HTML */


 
    HIS This is the header
      In Two Rows
    <p>
This is a description at the bottom too
</p>
 


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

}

尝试：

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

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

相关讨论

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

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

这个想法既要在底部显示DIV，也要使它固定在那里。通常，简单的方法会使粘性的DIV随主要内容一起向上滚动。

下面是一个完全有效的最小示例。请注意，不需要使用DIV嵌入技巧。许多BRS只是为了强制滚动条出现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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/>


   
</body>
</html>

如果您想知道您的代码可能不适用于IE，请记住在顶部添加doctype标记。这对IE来说是至关重要的。而且，这应该是第一个标签，上面不应该出现任何内容。

相关讨论

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

1
  some text here
1
2
3
4
5
#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}
相关讨论

似乎在工作：

1
2
3
4
5
6
7
8
#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 ,
     * if it is inline (e.g., ) will work without it */
    display: inline-block;
}

使用更少使得解决CSS难题更像是编码而不是像…我只是喜欢CSS。当您只需更改一个参数就可以更改整个布局(而不破坏它)时，这是一种真正的乐趣。

2015解

1
2
3
    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

http://codepen.io/anon/pen/qermdx(中文)

欢迎你

相关讨论