ウィンドウ上の隠れた流体要素の高さをjQueryでリサイズする

Question

私はホバー上にその記事の抜粋を表示する記事のサイドバーを持つ、ハイコンテンツWordPressブログを構築しています。私は、このコードで要素を非表示（slideDownとjQueryの一般的な跳躍の問題を回避するため）要素の高さを取得するためのjQueryを使用します。

function articleHeight() { 
    $(".article").each(function() { 
      $(this).css("height", $(this).height()); 
    }); 
} 

articleHeight(); 

し、ウィンドウのサイズ変更時に新しい高さを試してみて、取得するために、次のコード：

$(window).resize(function() { 
    articleHeight(); 
}); 

最初の部分はうまく動作しますが、サイズを再計算しないため、サイズが大きくなり過ぎたり、サイズを変更したりして抜粋を切ってしまいます。

要素がすでに隠されているため、新しい高さを取得できない場合がありますが、jQueryで要素を非表示にしてテストしましたが、まだ再計算されません。

これに関するご意見は非常に役に立ちます。本当にありがとう。

Answer 1

$(this)にはすでに持っていた高さがありますか？

$(this).css("height", $(this).height()); 

は新しいサイズに$(window).height()に対してそれを比較し、それを区別するために、いくつかの数学を使用する必要があります。

例えばこのよう

：あなたはあなたのページのために働く何かに200を変更します

$(this).css("height", $(window).height() - 200); 

。

Answer 2

あなたのためにouterHeightが機能するかもしれませんが、私はディスプレイのプロパティについてもっと気になります。インラインブロックで修正される可能性があります。ここで

はjqueryのouterHeightドキュメント http://api.jquery.com/outerHeight/

Answer 3

は、私はUIが動作するか完全にわからないんだけど、私はあなたが私は願ってあなたの問題を解決するために使用することができますjsFiddleを作成しましたです：

http://jsfiddle.net/RqqpK/1/

あなたの記事要素は、それぞれの要素で望ましい動作と状態を保存するために使用できる特別な機能が追加されました。

もちろん、css（{height：...}）よりもaddClass（）を使用する方が良いでしょう。また、コードが大きくなった場合に役立つその他の改善点がありますが、これが始まりです。幸運