将多个div对齐到父元素底部

Question

我可以帮助您翻译，以下是涉及 IT 技术的内容。您需要将三个 div 元素底部与其父元素对齐，并使它们的高度为 100%。

您尝试过以下代码：

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

但是并没有起作用。

即使更改窗口大小或分辨率，它也应该可以工作。

例如：

- user1515472

Answer 1

你可以使用新的Flexbox布局轻松实现这一点。

只需应用即可。

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

- T J

Answer 2

您需要指定父级和内容的相对高度，带有display:table-cell属性的

元素必须在具有display:table属性的元素中。

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

- SW4

Answer 3

如果你想要使用垂直的div而不是水平的，你可以尝试下面的代码。

.s_div{
  display: flex;
  align-items: flex-end;
}

在此输入图片描述

- mürtaza güler