問題タブ [outerheight]

pタグなどのブロック レベルの要素を DOM に追加しました。その寸法は自動的に計算されます (例: auto)。ただし、少なくとも最初は、jQuery でその高さを取得することはできません。しばらくすると (おそらく何らかのレイアウト処理が行われます)、高さを取得できます。

計算された高さを取得できるようにするために、要素をDOMに追加する以外に、要素を実際に測定可能にするために何が必要ですか?

具体的に言うと、それぞれに画像の URL データが添付されselectたいくつかのoption要素を持つ要素があります。タグ データを読み取り、要素を非表示にし、オプションを次のような要素を持つコンテナーに変換するイメージ ピッカー プラグインを呼び出します。optionselectdiv

そこで、33.33% の幅 (3 列を生成) の div 要素で埋められる固定幅のコンテナーがあります。これらの div のそれぞれは、変換されたオプション要素の 1 つを表します。imgそれらのそれぞれの中に、 andpタグを含む 100% 幅の div 要素があります。

さらに、imagesLoaded プラグインと masonry プラグインを使用して画像をレイアウトしています。各画像が読み込まれた後に実行される imagesLoadedイベントでは、要素の高さと幅がゼロではないprogressことがはっきりとわかります。imgただし、そのコンテナはそうではなく、pタグもそうではありません。

発生する可能性がある唯一の特別なことは、イメージ ピッカー プラグインを使用して要素を作成した直後に、 で要素をデタッチし、各イメージがロードされると発生するfor$('.convertedOptionElement').detach()の progressイベントで、それらをコンテナに追加することです。メソッドimagesLoadedを呼び出して、レイアウトを実行します。すべてがDOMにあるにもかかわらず、計算された高さがゼロであるため、ここで問題が発生します。masonry.appended

正確な幅 (たとえば、33.33% と 100% の代わりに 250px) を指定した場合でも、ロードされた同じイベント ハンドラーで、既存の画像の寸法 (つまり、すべての親要素に明示的なサイズが指定されています)... 段落タグの高さはまだゼロです。

これが私のコードですが、これは機能しています。ただし、私が使用している正確なコンテキストでは機能していません。その理由はわかりません。http://jsfiddle.net/p7cgahro/7/

私が行った場合

Chrome では、古い外側の高さを取得します。

私がしなければなりません

代わりに (または、もちろん、同様の効果を生み出すものは何でも) outerHeight、「正しい」高さを報告するようにします (これは、変更後に確認できる永続的な実際の高さであると予想されますmin-height)。

残念ながら、setTimeout私にとっては選択肢ではありません。代わりに何を使用できますか? すべての主要なブラウザー (現在のバージョン) で動作するはずです。

ページに 2 つの要素が並んでいます。1 つの要素は固定サイズ (100vh) – .hero-half – で、もう 1 つの要素は可変長のテキスト – .project-detailsです。Fluid テキスト コンテナーが拡張されて画像コンテナーよりも高くなった場合、その子要素の 1 つの高さを制限してテキスト コンテナーの高さの合計を画像の高さと等しくなるように制限するクラスをコンテナーに適用したいと考えています。

HTML:

関連する CSS:

これが私のJSコードです：

したがって、project-details div が .hero-half よりも高い高さに達すると、子の 1 つに max-height を設定するクラスが追加され、.project-details の合計の高さが .project-details 以下に戻ります。半分のヒーロー。

ただし、ウィンドウのサイズを変更してテキストを強制的にプロジェクトの詳細の高さを高くしすぎて、restrict-height クラスをトリガーすると、画面の幅と高さが偶数になる場合にのみ機能します (幅と高さの両方が偶数の場合)。 、または両方が奇数)。合計が奇数の場合、project-details の outerHeight が正しく計算されないようです。

問題は、.project-details の outerHeight が、制限されたテキストの高さの前の自然な高さで計算されることがあり、そのクラスが適用された後、制限されたテキストの高さの後に計算されることがあるということです。 .project-details の高さを許容範囲に戻します。

余分な時間がouterHeightの計算が常に正しいことを意味することを期待して、クラスの追加にタイムアウト遅延を追加しようとしましたが、違いはありませんでした。

この JS コードを変更して、restrict-height クラスが適用される前に .project-details outerHeight が常に高さを読み取っていることを確認するにはどうすればよいですか?

関連：奇数のピクセル寸法がここで影響を与えるのはなぜですか?

私は e ラーニング フレームワークの適応に取り組んでおり、notify-popup(div) を垂直方向に中央揃えにしようとしています。このために、notify-popup の高さを必要とする js を介してトップ マージンを設定するので、 を使用して高さを取得し$('.notify-popup').height(true)ます。初めてロードされたときに高さ「x」を返しますが、ページをリロードせずに関数を再度呼び出すと、16px が追加された新しい高さ「x + 16」が返されます。私が使用したすべてのパディングとマージンを含めるにはouterHeight(true)、それも機能しません。jqueryのheight()メソッドは、ページの事前レンダリング中に高さの計算で何かを除外または見逃していますか? ページの最初のレンダリング後に resetNotifySize 関数を呼び出すと、正しい高さが返されます。