我有一个父母div,有两个孩子。其中一个孩子将不会始终显示。如何使另一个孩子div填充父对象的高度而不会溢出?
我的第一个不会总是显示的孩子的身高是固定的。我尝试将第二个孩子的高度设置为100%,如果没有显示第一个孩子,则可以使用该高度,但是当第二个孩子不显示时,该高度就可以使用。
这是我的问题的小提琴:
.parent {
height: 400px;
width: 400px;
background: red;
border: 1px solid black;
}
.child1 {
height: 30px;
background: green;
}
.child2 {
height: 100%;
background: blue;
}
您可以使用flexbox布局。
只需将.parent
元素设置display
为flex
并添加flex-direction: column
:
.parent {
height: 400px;
width: 400px;
background: red;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.child1 {
height: 30px;
background: green;
}
.child2 {
height: 100%;
background: blue;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句