6

根据JQuery 文档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> 元素仅显示 outerHeight(true) 20px - 不包括任何边距。

这个关于 SO 的问题谈到了利润率下降，我在一定程度上理解了这个解释。我的问题不是为什么不包括边距。

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

@Gaby：改变元素样式并不是唯一的方法。您还可以在前后添加 0 高度的块项目。但我不是在寻找一种方法来防止边距崩溃。我正在寻找一种通用方法来确定元素占据的总高度。我需要这个来避免限制我的ng-scroll指令的使用。

4

2 回答 2

12

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

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

于 2013-10-07T22:30:30.617 回答
1

您应该单独计算没有边距的容器高度，然后将容器顶部+底部边距与第一个孩子的边距顶部和最后一个孩子的边距底部之和之间的最大值相加。

var mVert = parseInt($('#container').css('margin-top'))
    + parseInt($('#container').css('margin-bottom'));
var mVertChildren = parseInt($('#container').children().first().css('margin-top'))
    + parseInt($('#container').children().last().css('margin-bottom'));

var realHeight = $('#container').outerHeight(false)
    + (mVert > mVertChildren ? mVert : mVertChildren);

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

于 2014-11-21T12:05:55.770 回答