当我们将绝对定位元素的高度设置为0时，如何使其子元素消失?

Question

我的body中有一个div, class为'box'。那个div包含另一个类为box-inside的div。我已经设置了"盒子"上的绝对位置，并将所有插入属性设置为零，使其跨越整个身体的宽度。现在，我把它的高度设为0但是里面的方框并没有消失，它仍然在原来的位置。如何使盒子内零高度消失?

.box {
background: black;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
height: 0;
}
.box .box-inside {
padding: 2em;
background: #f4f4;
}

改变'的高度。方框’来得到一个清晰的概念。这是Codepen上的链接:https://codepen.io/aqib-ali-01/pen/ZEyEWKE?editors=0100

Answer 1

使用CSS属性overflow。这个属性被放置在一个容器元素上(在你的例子中是一个类为box的div)，它控制了太大而无法容纳容器的内容的行为。

使用overflow: hidden隐藏父节点溢出的所有内容。你的CSS将像下面这样:

.box {
background: black;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
height: 0;
overflow: hidden;
}
.box .box-inside {
padding: 2em;
background: #f4f4;
}