代码之家 › 专栏 › 技术社区 › Jakov

当子元素增加时,如何增加父元素?

css3 css javascript

Jakov · 技术社区 · 6 年前

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

父元素类是 .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 属性 用户数据 和 .scheduleWorkingPeriod容器 因为这里没有显示代码。

有人能帮忙吗?

1 回复 | 直到 6 年前

AndrewL64 6 年前

如本条所述 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前