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> 要素は、上下に 16 ピクセルの余白を追加するデフォルトのスタイルを使用しています。これにより、<ul> の outerHeight が 52px になります。

現在、親の <div> 要素は、outerHeight(true) を 20px しか示していません。これにはどちらのマージンも含まれていません。

SOに関するこの質問は、マージンの崩壊について語っています。私はその説明をある程度理解しています。私の質問は、マージンが含まれていない理由ではありません。

私の質問は、レンダリングされた div の高さをどのように決定できるかです。明らかに、outerHeight(true) が正しくない場合があります。

@Gaby: 要素のスタイルを変更することが唯一の方法ではありません。前後に高さ0のブロックアイテムを追加することもできます。しかし、マージンの崩壊を防ぐ方法を探しているわけではありません。要素が占める全高を決定する普遍的な方法を探しています。ng-scrollディレクティブ の使用に関する制限を回避するために、これが必要です。

4

2 に答える 2