将多个div与父级的底部对齐 [英] Align multiple divs to bottom of parent

问题描述

我想将父级底部的3个div与 100％高度对齐.

我尝试过:

 父级{高度:100％;显示:表格单元格；垂直对齐:底部；} 

但不起作用.

即使您更改窗口的大小或分辨率，它也应该起作用.

示例:

解决方案

您可以使用新的

  * {边距:0;填充:0;框大小:border-box；}html，身体 {高度:100％;}#容器 {显示:flex;flex-direction:列;证明内容:flex-end;高度:100％;边框:1px实线；}.盒子 {高度:50px；宽度:100％;边框:1px实线；}#box1 {背景:dodgerblue;}#box2 {背景:橙色；}#box3 {背景:石灰；}  

 < 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的详细信息

I want align 3 divs at the bottom of parent with 100% height.

I tried:

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

but doesn't work.

It should work even if you change the size or resolution of the window.

example:

解决方案

You can easily do this using the new Flexbox Layout

simply apply

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

For the container div as shown below:

* {
  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

这篇关于将多个div与父级的底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！