Question

鉴于

<div id="parent>
  <div id="child" style="height:10px;margin:5px;padding:2px"></div>
</div>

我想计算父级的高度（包括边距）。我无法找到一种正确的方法。

console.log($('#parent').outerHeight());        //= 14
console.log($('#parent').outerHeight(true));    //= 14
console.log($('#parent')[0].offsetHeight);      //= 14
console.log($('#parent')[0].getBoundingClientRect().height); //=14

//but
console.log($('#child').outerHeight());         //= 14
console.log($('#child').outerHeight(true));     //= 24 !!

以下是jsfiddle：https://jsfiddle.net/estani/w0ro2Lsw/3/

Answer 1

子元素的边距在父元素之外。但它们不是父元素的边距，这就是为什么outerHeight不会注意到它们。

找到父母身高+孩子边际的最佳方法取决于您的使用案例：

如果孩子是父母中唯一的元素，并且你想使用边距使父母比孩子大，我建议给父母padding:5px而不是{{1}给孩子。

添加margin:5px会使父级包含子级边距。

如果您希望孩子和家长共享保证金，请将overflow:auto提供给家长。

在所有这些情况下，outerHeight将返回您想要的值。

Answer 2

你的孩子div正在溢出父div。您可以在父div中使用它：

overflow:auto

示例代码：

<div id="parent" style='overflow:auto'>

Answer 3

设置父“display:inline-block;”

This is the JSFiddle

使用父级的边距计算outerHeight

3 个答案: