将最后一个孩子扩展到父母的底部[重复]答案

【问题标题】：Expand last child to the bottom of parent [duplicate]将最后一个孩子扩展到父母的底部[重复]
【发布时间】：2016-08-19 07:43:24
【问题描述】：

我有一个 div 容器和里面的孩子。

<div id="parent">
    <div class="child"></div>
    <div class="child"></div> 
    <div class="child"></div>
    <div class="child" id="last-child"></div>      
</div>

我不知道孩子的身高（每次都有不同的内容），但我有

#parent {
   min-height: 500px;
}

我想将 last-child 拉伸到 parent 的底部（它必须填充从他的 subling 到 parent 底部的空闲空间）。

【问题讨论】：

标签： html css alignment parent

【解决方案1】：

您可以为此使用 flexbox（添加背景颜色以提高可见性）：

#parent {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  background: #999;
}
.child {
  background: #eee;
}
#last-child {
  flex-grow: 1;
  background: #faa;
}

<div id="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child" id="last-child">4</div>
</div>

【讨论】：

【解决方案2】：

使用display:flex; 和flex--direction 为column 使父级成为弹性框。接下来为最后一个子元素赋予flex:1; 属性，使其扩展到父元素中的剩余空间。

#parent {
   min-height: 500px;
  display:flex;
  flex-direction: column;
  
}
#last-child{
  flex:1;
  background:blue;
}
.child{
  background:red;  
}

<div id="parent">
    <div class="child">jljlkj</div>
    <div class="child">kjljlkjl</div> 
    <div class="child">kljlkjlhi</div>
    <div class="child" id="last-child"></div>      
</div>

【讨论】：

我希望我能给出第二个正确答案。也谢谢你。
你也可以投票...
我投了赞成票，但我刚刚注册。