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;
 }

父元素和子元素需要具有相同的类，并且由于此处未显示代码，我也无法更改position和.user-data中的.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>

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

1 个答案: