jQueryの高さ（）はサイズ変更時に変更されません

Question

私はこれまでにこの問題を抱えていませんでしたが、解決策を見つけることができないので、皆さんが私を助けてくれることを願っています。

この関数が何をするかのjQuery

function setTheHeight() { 

    if($('#main.level1 .block.attention .block-content').length) { 
     //Get value of highest element 
     var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
      function() { 
       return $(this).height(); 
      } 
     )); 
     console.log(maxHeight); 
     $('#main.level1 .block.attention .block-content').height(maxHeight); 
    } 
} 

setTheHeight(); 

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

Basiclyは、この高さに、選択したすべてのdivの高さを最高のdivをチェックし、設定されています。これは正常に動作します。しかし、レスポンシブなデザインなので、ユーザーのサイズを変更するとコンテンツは小さくなり、divは高くなります。だから私はサイズ変更イベントを追加しました。イベントは解雇されていますが、身長は変わりません。サイズの変更が高さを変えない理由は何ですか？

クイックjsFiddle何が起こるかを表示するには：http://jsfiddle.net/3mVkn/

FIX

うーん、これは単なる愚かでした。私は高さを設定していたので、それは既に固定されていたので、高さをリセットするだけでした。

更新コード：

function setTheHeight() { 

    if($('#main.level1 .block.attention .block-content').length) { 

     //Reset height 
     $('#main.level1 .block.attention .block-content').height('auto'); 

     //Get value of highest element 
     var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
      function() { 
       return $(this).height(); 
      } 
     )); 
     console.log(maxHeight); 
     $('#main.level1 .block.attention .block-content').height(maxHeight); 
    } 
} 

setTheHeight(); 

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

Answer 1

これはjQuery関連ではなくCSSです。 .block-contentの高さをある値に設定すると、ウィンドウのサイズを変更した後に高さがautoではなく、あらかじめ定義された値に設定されるため、ブロックコンテンツの高さが変更されないからです。

解決策は、return $(this).height()の代わりにreturn $(this)[0].scrollHeightです。 この方法では、CSSの定義された高さではなく、コンテンツの実際の高さが返されます。

EDIT：

ソリューションは.block、コンテンツ内のすべての子の高さを計算し、その値を返すように実際にあります。私はあなたのコードをここで編集しましたhttp://jsfiddle.net/3mVkn/12/

これはあなたに必要な結果を与えるはずです。

Answer 2

私はあなたが.map()機能の一つのパラメータが欠けていると思います。私は見た.map()here。