我想将父级底部的 3 个 div 与100% height.
I tried:
parent {
height: 100%;
display: table-cell;
vertical-align: bottom;
}
但不起作用。
即使您更改窗口的大小或分辨率，它也应该起作用。
example: 
您可以使用新的轻松完成此操作弹性盒布局 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
只需申请
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>更多关于 flexbox @ css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/