Question

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

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

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

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

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

Answer 1

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

这将允许他们增长以填充可用空间：https://jsfiddle.net/jpdjkdr0/1/

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: