假设我有以下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中做到这一点?


当前回答

似乎起作用了:

#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。这是一个真正的乐趣,当你可以改变整个布局(而不破坏它:)只是改变一个参数。

其他回答

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

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

当底部内容的大小不固定时,当容器的大小不固定时,这种反应就像预期的那样。

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

试一试:

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

尝试更改%来修复它。例如:120%或90%等等。

如果你有多个动态高度项,使用CSS显示table和table-cell的值:

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

演示也有一个例子如何垂直中心对齐使用相同的技术。