最後の子を親の末尾に展開します

Question

div-containerとその中に子が1つあります。

​​

私は親の底に最後の子をストレッチしたい私は、子供の高さ（毎回異なるコンテンツを）知らないが、私は

#parent { 
    min-height: 500px; 
} 

を持っている（それは自由記入する必要があります下敷きから親底までの空間）。

Answer 1

あなたは（背景色は視認性のために追加された）、このためにフレキシボックスを使用することができます。

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

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>