基于子元素的高度（绝对位置）增加元素的父元素高度（相对位置）

Question

如何根据具有绝对位置的子元素高度增加具有相对位置的父元素的高度。

在下面的例子中，父元素的高度显示为0px

PS：我不想使用任何脚本

预期：

我得到的是：

JSFIDLE

超文本标记语言：

<div class="parent">
    <div class="child" style="top:20px;">Hello</div>
    <div class="child" style="top:40px;">Some content</div>
    <div class="child" style="top:60px;">Some more content</div>
</div>

CSS:

.parent{position:relative;background:green;height:100%;border:1px solid #000000;width:250px;}
.child{position:absolute;}

Answer 1

此片段为您提供了仅使用CSS所需的外观。

它通过在最后一个子元素上设置一个绿色背景来实现这一点，并在第一个子元素上设置一个伪元素覆盖整个元素上方的位，使其看起来好像不存在。

边框也类似地使用伪元素被黑客入侵。

.parent {
  position: relative;
  width: 250px;
}

.child,
.child::before,
.child::after {
  box-sizing: border-box;
}

.child {
  position: absolute;
}

.child:first-child::before {
  content: '';
  position: absolute;
  bottom: 1em;
  background-color: white;
  width: 250px;
  height: 100vh;
  z-index: -1;
  border-bottom: 1px solid #000000;
}

.child:last-child::before {
  content: '';
  position: absolute;
  bottom: 0;
  background-color: green;
  width: 250px;
  height: 100vh;
  border: 1px solid #000000;
  border-top-width: 0;
  z-index: -2;
}

<div class="parent">
  <div class="child" style="top:20px;">Hello</div>
  <div class="child" style="top:40px;">Some content</div>
  <div class="child" style="top:60px;">Some more content</div>
</div>

Answer 2

在父类中，将高度：100%更改为高度：100px

因为绝对位置并没有任何高度，所以应该为父对象定义高度。

.parent{
    position:relative;
    background:green;
    height:100px;
    border:1px solid #000000;
    width:250px;
 }