outerHeight(true)不包含边距？

Question

根据JQuery docs, outerHeight(true)函数返回元素的总高度,包括填充边框和边距.我遇到了这个承诺似乎被破坏的案例.这是一个复制品.

这是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']);

在此示例中,<ul>元素使用默认样式,该样式添加16px顶部和底部边距.这会将<ul>的outerHeight带到52px.

现在,父<div>元素只显示20个外部的highHeight(true) - 它不包含任何边距.

关于SO的这个问题谈到了利润率的崩溃,我在一定程度上理解了解释.我的问题不是为什么不包括利润.

我的问题是如何确定渲染的div的高度.显然,在某些情况下,outerHeight(true)是不正确的.

@Gaby:改变元素风格并不是唯一的方法.您还可以在之前和之后添加0个高度块项.但我并不是在寻找防止利润率崩溃的方法.我正在寻找一种通用的方法来确定元素占据的总高度.我需要这个以避免限制我的ng-scroll指令的使用.

Answer 1

添加overflow:auto了对div元素将禁用保证金折叠和值将被计算正确.

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