当子元素增加时，如何增加父元素？

Question

我有两个类，我需要使它们的元素高度相同。 随着子元素的高度增加，父元素也需要增加其高度。

父元素类为.user-data ，子元素类为.scheduleWorkingPeriodContainer 。

.user-data {
    position: relative;
    float: left;
    box-sizing: border-box;
    min-height: 40px;
    align-items: center;
    text-align: center;
    border-left: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    background-color: white;
}

.scheduleWorkingPeriodContainer {
    position: absolute;
    z-index: 1;
    width: 100%;
    display: block;
    overflow-x: hidden;
    height: auto;
 }

父元素和子元素需要具有相同的类，并且由于此处未显示代码，我也无法更改.user-data和.scheduleWorkingPeriodContainer的position属性。

有人可以帮忙吗？

Answer 1

如该其他答案所述，除非使用固定高度或JavaScript，否则不能根据绝对定位的元素设置父级的高度。

---

使用JavaScript，您只需要获取绝对位置的子元素.scheduleWorkingPeriodContainer的高度，然后将该获取值设置为relative positioned父元素.user-data的高度。

---

检查并运行以下代码片段，以获得上述内容的实际示例。 在下面的代码片段，我改变了父元素的高度为5px超过它的absolute positioned子元素，这样就可以看到父元素的额外高度：

 /* JavaScript */ var child = document.querySelector(".scheduleWorkingPeriodContainer"); var parent = document.querySelector(".user-data"); parent.style.height = parseInt(window.getComputedStyle(child).height) + 5 + "px"; 

 /* CSS */ .user-data { position: relative; float: left; box-sizing: border-box; min-height: 40px; align-items: center; text-align: center; border-left: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; background-color: green; width: 100%; } .scheduleWorkingPeriodContainer { position: absolute; z-index: 1; display: block; width: 100%; overflow-x: hidden; height: auto; background-color: red; } html, body {width: 100%;height: 100%; margin: 0; padding: 0;} 

 <!-- HTML --> <div class="user-data"> <div class="scheduleWorkingPeriodContainer"><p>ABCD</p><p>ABCD</p><p>ABCD</p><p>ABCD</p> </div> </div>