为什么overflow:clip导致正确的子高度，但不正确的父高度?

Question

在下面的代码片段中，为什么#parent元素的offsetHeight比#content元素高这么多?

我正在尝试消除显示的红色区域。overflow:clip坏了吗?

console.log(document.getElementById('content').offsetHeight)
console.log(document.getElementById('parent').offsetHeight)

#parent {
position: absolute;
width: 400px;
background-color: red;
}
#content {
background-color: cyan;
padding: 6px;
overflow: clip;
}
#left {
float: left;
background-color: lightgrey;
width: 38px;
height: 500px;
margin-right: 8px;
}

<div id="parent">
<div id="content">
<div id="left"></div>
<div id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
</div>

Answer 1

你把我从你以前的帖子引导到这里，正要回答，但后来我读了评论，我可以看到答案已经由Alohci给出;您需要在#parent上设置一个height(0)

然而，这就是为什么我包括你之前的问题，如果你想保持padding完整的#content，或者如果你需要#parent是它的孩子的高度，这个答案可能是不够的。

拥有这两件事的最灵活的解决方案是使用JS设置#left的max-height和#right的height。还为您提供了完全摆脱使用overflow:clip的选项。

document.getElementById('left').style.maxHeight = document.getElementById('right').clientHeight + 'px';

#parent {
position: absolute;
width: 400px;
background-color: red;
}
#content {
background-color: cyan;
padding: 6px;
}
#left {
float: left;
background-color: lightgrey;
width: 38px;
height: 500px;
margin-right: 8px;
}

<div id="parent">
<div id="content">
<div id="left"></div>
<div id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
</div>

(或者如果您最终需要使用#content的height，则使用:

)

const content = document.getElementById('content');
document.getElementById('left').style.maxHeight = (content.offsetHeight - (parseInt(getComputedStyle(content).padding, 10) * 2)) + 'px';

)