作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我做了这个例子:https://jsfiddle.net/jpdjkdr0/
我想要实现的是使 div 在任何情况下始终适合 #wrapper
高度(固定为 500px)。
因此当切换一个新的 div(点击按钮)时,所有的 div 都应该自行调整以适应整个包装高度。
如果可能的话,我想在纯 css 中实现这一点,但我不知道 atm。
有什么建议吗?也许一些 flexbox ?!
最佳答案
你可以添加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>
关于javascript - CSS如何让div充满所有的垂直空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42558345/
我是一名优秀的程序员,十分优秀!