2

divの高さを決定しようとしています。これは単純に聞こえますが、子孫のコンテンツのみがフローティングされるという事実によって複雑になるため、height/outerHeight (jQuery を使用)/clientHeight/offsetHeight を要求すると、ページ上で確実にレンダリングされることは明らかですが、0 しか返されません。高さのある。HTML 構造の例を次に示します。

<div id="root">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two">
         <p>Other text</p>
      </div>
   </div>
</div>

「text-left」要素と「text-right」要素には「float: left;」があります。と「float: right;」そのため、「ルート」の高さを尋ねると、0 であることがわかります。ただし、もちろん、「テキスト 1」と「テキスト 2」の高さを取得すると、正しくそのことがわかります。それは20か何かです。

「ルート」要素の実際の高さを決定するにはどうすればよいですか? (たとえば、「text-one」の高さが 50 で「text-two」の高さが 20 の場合、実際の高さは 50 であることがわかります)

すべての子孫要素の高さを計算し、それらが浮いているかどうかなどを計算し、最終的な数値を得る何らかのロジックがあると思います...しかし、私はそれを解決するほど賢くありません。

前もって感謝します。

編集: HTML の変更 (たとえば、「クリア」を含める) はオプションではないことに注意してください。このdivの高さをそのまま伝えられるようにする必要があります。

4

6 に答える 6

7

高さがゼロだからです。これを見てみる

<html><head><title>test</title></head><body>

<div id="root" style="border:1px solid red">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one" style="float: left;">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two" style="float: right;">
         <p>Other text</p>
      </div>
   </div>
</div></body>

ヘッダーは空で、本文にはレイアウトから浮かび上がった要素しか含まれていないため、これも空としてカウントされ、開いたままにするためにコンテンツのルートが失われます。

また、同じ理由により、body 要素の高さは 0 です。追加することで確認できます<body style="border:1px solid blue">

于 2009-08-04T11:42:51.150 に答える
3

すべての #root の子 (厳密に言えば、子孫) が浮動している場合、その高さは実際にゼロです。垂直方向のスペースを占有しないことを証明するために、背景色を設定してみてください。

フロートされた 2 つの要素の高さを取得した場合は、大きい方を取得できます。

var height = Math.max(leftHeight, rightHeight);
于 2009-08-04T11:44:52.333 に答える
1

すべての内側の div を読み取り、2 つの div から最大の高さの値を格納する関数はどうですか?

私はあまり正しいとは思いませんが、ここで試してみてください：

var max_height = 0;
$.each( $('#root div'), function(x, y){
    var yHeight = $(y).height();
    max_height = ( yHeight > max_height) ? yHeight : max_height;
});
console.log(max_height); //should have the height value.

ワーキングデモ

于 2009-08-04T11:48:51.217 に答える