CSS如何使的div填满所有的垂直空间

Question

我做了这个例子：https://jsfiddle.net/jpdjkdr0/

我想要实现的是做的div始终适应#wrapper高度（这是500px的固定）在任何情况下。

因此，当切换一个新的div（点击按钮）时，所有div应该调整自己以适应完整的包装高度。

我想在纯css中实现这一点，如果可能但我没有想法atm。

有什么建议吗？也许有些flexbox？！

Answer 1

您可以将display: flex; flex-direction: column;添加到#wrapper并将子div设置为flex: 1。

这将让他们成长，以填补可用空间：https://jsfiddle.net/jpdjkdr0/1/

.hide { 
 
    display:none; 
 
} 
 
#wrapper { 
 
    height: 500px; 
 
    width:500px; 
 
    border: 10px solid violet; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#wrapper div { 
 
    flex: 1; 
 
} 
 
#div-1 { 
 
    background: brown; 
 
    color: white; 
 
} 
 
#div-2 { 
 
    background: green; 
 
    color: white; 
 
} 
 
#div-3 { 
 
    background: red; 
 
    color: white; 
 
} 
 
#div-4 { 
 
    background: blue; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="$('#div-1').toggle()"> 
 
show div 
 
</button> 
 
<div id="wrapper"> 
 
<div id="div-1" class="hide"> 
 
1 
 
</div> 
 
<div id="div-2"> 
 
2 
 
</div> 
 
<div id="div-3"> 
 
3 
 
</div> 
 
<div id="div-4"> 
 
4 
 
</div> 
 
</div>