jquery - outerHeight(true) 不包括边距？

Question

根据 JQuery docs outerHeight(true) 函数返回元素的总高度，包括填充边框和边距。我遇到了一个案例，这个 promise 似乎被打破了。这是一个 repro .

这是 html:

outer div height = <span id="div-target"></span><br/>
ul height (including margins) = <span id="ul-target"></span><br/><br/>
<div show-height-in='div-target'>
    <ul show-height-in='ul-target'>here</ul>
</div>

和javascript:

var app = angular.module('application',[]);
app.directive('showHeightIn', function($log){
    return function(scope, element,attrs) {
        $('#' + attrs.showHeightIn).text($(element).outerHeight(true));
    }
});
angular.bootstrap(document, ['application']);

在此示例中，

元素使用默认样式，它添加了 16px 的顶部和底部边距。这使
的 outerHeight 变为 52px。

现在父级

元素仅显示 outerHeight(true) 20px - 不包括任何边距。

这question on SO talks关于崩溃的边距，我在一定程度上理解这个解释。不过，我的问题不是为什么不包括边距。

我的问题是如何确定呈现的 div 的高度。显然 outerHeight(true) 在某些情况下是不正确的。

@Gaby:改变元素样式并不是唯一的方法。也可以前后添加0高度的 block 项。但我并不是在寻找一种方法来防止 margin 崩溃。我正在寻找一种通用方法来确定元素占用的总高度。我需要这个来避免对我的 ng-scroll 的使用限制指示。

最佳答案

在 div 元素上添加 overflow:auto 将禁用边距折叠，并且该值将被正确计算。

演示在 http://jsfiddle.net/hdReR/2/

关于jquery - outerHeight(true) 不包括边距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19235832/

Answer 1

在 div 元素上添加 overflow:auto 将禁用边距折叠，并且该值将被正确计算。

演示在 http://jsfiddle.net/hdReR/2/