4

最初に高さが設定されておらず、浮動要素を含む div コンテナーの高さを取得しようとしています。offsetHeight物件は増え続けています0。含まれている div のオーバーフロー プロパティを に設定すると、高さを取得できますhidden。これよりも良い方法はありますか？

jsFiddle に例があります - http://jsfiddle.net/6RQMb/。テストにjsFiddleを使用するのは初めてなので、間違ったことをした場合はお知らせください...

jsFiddle で何かを台無しにしてしまった場合に備えて (そして、stackoverflow が要求したため)、ここに情報例を示します。

HTML

<div id="container"><p>Some text that gives this element height</p></div>

CSS

p {float:left;}

/* uncomment next line and it works, without it the alert comes back with 0

#container {overflow:hidden;}

*/

ジャバスクリプト

alert( document.getElementById('container').offsetHeight );
4

2 に答える 2

2

メソッドを使用してclearfix、コンテナー要素を強制的に「展開」し、実際にすべての子フローティング要素をラップすることができます。

#containerDiv:after { content:"."; clear:both; visibility:hidden; display:block; height:0; position:relative; }

この手法では、ブラウザーが CSS 生成コンテンツをサポートしている必要があります。IE6 までのブラウザをサポートするために使用できる、この手法のバリエーションがあります。Chris Coyier がここで説明しています。

ここで実際に動いています: http://jsfiddle.net/remibreton/2vQVJ/1/

編集: IE8+ のサポートのみに関心がある場合は、はるかにクリーンな方法を使用して、自己クリアしたい要素にクラスを.clearfix:after { content: ""; display: table; clear: both; }追加して、その CSS を最小限に抑えることができます。clearfix

于 2013-01-08T03:37:48.607 に答える
0

子要素pがフローティングであるため、コンテナー分割にはグラフィカルな高さがありません。

offsetHeightこれは、何が返されるかについて話している MSDN からの抜粋です。http://msdn.microsoft.com/en-us/library/ms534199%28VS.85%29.aspx

カスケード スタイル シート、レベル 1 (CSS1) ボックス モデルに準拠するために、ドキュメントで !DOCTYPE 宣言を使用して標準準拠モードをオンにすると、Microsoft Internet Explorer 6 以降ではオブジェクトの高さの計算方法が異なります。この違いは、offsetHeight プロパティの値に影響を与える可能性があります。標準準拠モードがオンになっている場合、高さプロパティは、オブジェクトのコンテンツを囲む境界ボックスの上端と下端の間の距離を指定します。標準準拠モードがオンになっておらず、以前のバージョンの Windows Internet Explorer を使用している場合、高さプロパティには、オブジェクトのバウンディング ボックスを囲む境界線とパディング ベルトも含まれます。

グラフィックの高さをcontainerDiv. 親要素をクリアする方法はたくさんあります。どちらがあなたに最も適しているかを決めるのはあなた次第です。私は一般的に使用しますoverflow: hidden。

Clear プロパティについては、こちらで詳しく説明しています。https://developer.mozilla.org/en-US/docs/CSS/clear

于 2013-01-08T03:46:14.303 に答える