web-dev-qa-db-ja.com

jQuery-動的divの高さ

Pageloadとウィンドウのサイズ変更でdivのサイズを変更しようとしています。以下のコードは</body>の前に配置され、ページの読み込みでは正常に機能しますが、ウィンドウのサイズ変更では何もしません。サイズ変更時にトリガーされるアラートを使用してサイズ変更機能をテストしましたが、高さは変更されていません。

<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>

pdate：長い休憩の後、問題の原因を発見しました。 jqueryスクリプトを使用して、サイズ変更されているのと同じdivにスタイル付きスクロールバーを追加しています。コメントアウトすると、すべてが正常にサイズ変更されます。スクロールバーの初期化をサイズ変更と同じ機能に移動し、考えられるバリエーションを試しましたが、それでも機能しません。

（＃main-content divには.scroll-paneクラスもあります）

<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>
jquerycsshtmlresizeheight
9
lemon

解決しました！

必要なのは、高さを計算する前に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>
14
lemon

ウィンドウのサイズ変更機能は、ウィンドウのサイズが変更された後、1回だけ起動することに注意してください。サイズ変更操作中は更新されないため、ウィンドウの境界線をドラッグしてこれをテストする場合、マウスボタンを離すまで変更は行われません。

また、次のように、$(document).ready()内でこれを行うようにしてください。

<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>

これが 作業デモ です。

5
Vegard Larsen

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

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

コンテンツがdivの外に流れるという問題がありました。

1
tnypxl