jQuery - 動的なdivの高さ

Question

私はpageloadとウィンドウのサイズを変更するdivのサイズを変更しようとしています。コードは</body>の前に配置され、pageloadでは正常に動作しますが、ウィンドウのサイズ変更は行われません。私はサイズ変更機能を、サイズ変更時にトリガーするアラートでテストしましたが、高さは変更されません。

<script type='text/javascript'> 
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 

    $(window).resize(function(){ 
     $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 
     alert('resized'); 
    }); 
</script> 

---

更新：長い休憩の後、私は問題の原因を発見しました。私はサイズ変更されている同じdivにスタイル付きスクロールバーを追加するjqueryスクリプトを使用しています。私がコメントアウトすると、すべてがうまくリサイズされます。私はresizeと同じ関数でスクロールバーの初期化を移動し、私が考えることができる任意のバリエーションを試して..まだそれを動作させることはできません。

（＃メイン・コンテンツのdiv要素も持っている.scrollペインクラス）ウィンドウのサイズが変更された後、ウィンドウのリサイズ機能だけ、一回発射していること

<script type='text/javascript'> 
$(function(){ 
    $('#main-content').css({'height':(($(window).height())-361)+'px'}); 
    $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15}); 

    $(window).resize(function(){ 
      $('#main-content').css({'height':(($(window).height())-361)+'px'}); 
    }); 
}); 
</script> 

Answer 1

解決済み！

高さを計算して再適用する前に、jScrollPaneを削除するだけでした。

<script type='text/javascript'> 
$(function(){ 
    $('.scroll-pane').css({'height':(($(window).height())-361)+'px'}); 
    $('#main-content').jScrollPane({scrollbarWidth:15, scrollbarMargin:15}); 

    $(window).resize(function(){ 
      $('.scroll-pane').jScrollPaneRemove(); 
      $('#main-content').css({'height':(($(window).height())-361)+'px'}); 
      $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15}); 
    }); 
}); 
</script> 

Answer 2

注意。サイズ変更操作中には更新されないので、ウィンドウ枠をドラッグしてこれをテストすると、マウスボタンを離す前に変更は行われません。

<script type='text/javascript'> 
$(function() 
{ 
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 

    $(window).resize(function(){ 
     $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 
     alert('resized'); 
    }); 
}); 
</script> 

ここworking demoは次のとおりです。

また、あなたはこのように、$(document).ready()以内にこれを行うことを確認してください。

Answer 3

ドキュメントの高さがウィンドウの高さ以下でない限り、関数を実行しないでください。

$(function() { 
    if($(document).height() <= $(window).height()) { 
    $('#wrapper').css({ 'height': ($(window).height()) }); 
    $(window).resize(function(){ 
     $('#wrapper').css({ 'height': ($(window).height()) }); 
    }); 
    } 
}); 

コンテンツがdivの外に流れ出す問題がありました。