将多个div对齐到父级的底部

Question

我希望在父级底部对齐3个div，100%高度。

我试过了：

parent {
    height: 100%;
    display: table-cell;
    vertical-align: bottom;
}

但不起作用。

即使您更改窗口的大小或分辨率，它也应该有效。

示例：

Answer 1

您可以使用新的Flexbox Layout

轻松完成此操作

只需申请

display:flex;
flex-direction: column;
justify-content:flex-end;

对于容器div，如下所示：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
#container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  border: 1px solid;
}
.box {
  height: 50px;
  width: 100%;
  border: 1px solid;
}
#box1 {
  background: dodgerblue;
}
#box2 {
  background: orange;
}
#box3 {
  background: lime;
}

<div id='container'>
  <div id='box1' class='box'></div>
  <div id='box2' class='box'></div>
  <div id='box3' class='box'></div>
</div>

More about flexbox @ css-tricks

Answer 2

您需要指定父级和内容的相对高度，div display:table-cell必须位于display:table

的元素中

Demo Fiddle

HTML

<div>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
div {
    display:table;
    height:100%;
}
div div {
    height:100%;
    width:100px;
    border:1px solid black;
    display:table-cell;
    vertical-align:bottom;
}
div div div {
    display:block;
    height:20px;
}