Question

当div的子项包含边距时，这些边距不包含在div.offsetHeight的计算中。但是，除了，当你对父div做某些事情时，包括给它1px的填充。

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

这里发生了什么？这是定义的行为吗？另外，如果没有这个1px的黑客攻击，无论如何都要获得元素的实际高度（包括子边距，而不是它自己的边距）？

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

JSFiddle

Answer 1

正如哈希姆在评论中指出的那样，问题在于利润率的下降。父div之间没有任何内容，因此div的子h1的边距变为其边距。如果div有填充或边框，则可以防止边距崩溃。

为了使边距不崩溃，我们可以使用父:before上的:after和div伪元素：

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

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

中

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

updated JSFiddle

添加1px填充会导致外部div包含子边距

1 个答案: