当我们将其高度设置为零时，如何使绝对定位元素的子元素消失？ [复制]

Question

我的体内有一个“盒子”类的 div。并且该 div 包含另一个具有“box-inside”类的 div。我已经在“盒子”上设置了绝对位置，并将所有插入属性设置为零，以使其跨越整个身体宽度。现在，我将它的高度设置为零，但它里面的盒子并没有消失，它仍然在它的位置。如何让内框消失，高度为零？

.box {

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

更改“.box”的高度以获得清晰的概念。 这是 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;
}