我有一个容纳两个孩子的父div。其中一个孩子不会一直显示。如何让另一个孩子填充父母的高度而不会溢出?
我的第一个不会一直显示的孩子有一个固定的高度。我试着让第二个孩子达到100%的高度,如果没有显示第一个孩子,但是当第二个孩子出现溢出时,它会起作用。
这是我的问题的一个小提琴:
.parent {
height: 400px;
width: 400px;
background: red;
border: 1px solid black;
}
.child1 {
height: 30px;
background: green;
}
.child2 {
height: 100%;
background: blue;
}
答案 0 :(得分:2)
您可以使用flexbox layout。
只需将.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>
答案 1 :(得分:0)
您可以使用vh
代替%
。这意味着高度应为100%
查看设备。
.parent {
height: 400px;
width: 400px;
background: red;
border: 1px solid black;
display: block;
}
.child1 {
height: 30px;
background: green;
display: none;
}
.child2 {
height: 100vh;
background: blue;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>