Question

我有一个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;
}

我想将最后一个孩子拉伸到父母的底部（它必须从他的subling到父母底部填充自由空间）。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

将最后一个孩子扩展到父母的底部

2 个答案: