如何在子元素增加时增加父元素？

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中的.scheduleWorkingPeriodContainer属性。

有人能帮忙吗？

Answer 1

正如本other answer中所述，除非使用固定高度或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>

​