3

当 div 的子元素包含边距时，这些边距不包括在div.offsetHeight. 但是，当您对父 div 执行某些操作时除外，包括给它 1px 的填充。

下面的代码导致报告的 div 高度从 38px 跳到 83px（“正确”大小，包括子边距）。为元素添加边框具有相同的效果。

这里发生了什么？这是定义的行为吗？另外，如果没有这个 1px hack，是否有办法获得元素的实际高度（包括子边距，但不是它自己的边距）？

（这个问题的上下文是我在调整窗口大小时调整了 iframe 的大小，并且只有在包含 1px 填充时计算才能正常工作。）

var hasPadding = false;

var alertDivHeightButton = document.getElementById('2');
alertDivHeightButton.onclick = alertDivHeight;
var togglePaddingButton = document.getElementById('3');
togglePaddingButton.onclick = togglePadding;

function alertDivHeight () {
    var div = document.getElementById('1');
    alert("width of div: " + div.offsetHeight);
}

function togglePadding () {
    var div = document.getElementById('1');
    if (hasPadding) {
        div.style.padding = '0px';
        togglePaddingButton.value = "Add 1px padding";
    } else {
        div.style.padding = '1px';
        togglePaddingButton.value = "Remove 1px padding";
    }
    hasPadding = !hasPadding;
}
<div id="1">
    <h1>Hello, world</h1>
</div>

<input type="button" id="2" value="Alert div height">
<input type="button" id="3" value="Add 1px padding">

JSFiddle

4

1 回答 1

1

正如哈希姆在评论中指出的那样，问题在于利润率下降。父div级与它的父级之间没有任何关系，因此div' 的子级的边距h1成为它的边距。如果div有填充或边框，这可以防止边距折叠。

为了使边距不塌陷，我们可以在 parent 上使用:beforeand:after伪元素div：

#a1:before, #a1:after{
    content: '';
    display: table;
}

这会稍微改变子元素的位置，但无论填充如何，它都会保持高度一致，并导致子边距包含在div.offsetHeight

我在这里的另一个答案中找到了这种技术。

更新的 JSFiddle

于 2015-02-24T23:23:29.430 回答