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

#标题{ 身高:150 px; } < div id = "头" > <标题>标题< / h1 > 标题内容(一行或多行) < / 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中做到这一点?


当前回答

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

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

其他回答

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

假设你的数据高度是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);
}

这里有一个活生生的例子

希望这能有所帮助。

如果您不担心遗留浏览器,可以使用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/

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

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

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

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

}

如果父元素/块元素的行高大于Inline元素的行高,Inline或Inline块元素可以对齐到块级元素的底部

标记:

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

*确保你在标准模式