将最后一个 child 扩展到 parent 的底部

Question

里面有一个div-container和children

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

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

#parent {
   min-height: 500px;
}

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

Answer 1

使父级成为 display:flex; 且 flex--direction 为 column 的弹性框。接下来给最后一个子元素 flex:1; 属性使其扩展到父元素中 space 的其余部分。

#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>

Answer 2

您可以为此使用 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>

将最后一个 child 扩展到 parent 的底部

Expand last child to the bottom of parent

html

css

parent

alignment