0

小さな質問があります。2 つの div の高さを設定して、ウィンドウを最小化した場合に、それらが折りたたまれずに動的にスケーリングされるようにするにはどうすればよいですか? 私はjsでこれを行いました:

$(document).ready(function(){
    var footer = document.getElementById('footer').offsetHeight;
    var sidebar = document.getElementById('sidebar').offsetHeight;
    document.getElementById('sidebar').style.height = sidebar - footer + 'px';

});

これは機能していますが、最小化すると機能しません。関数で実行し、window.loadなどで呼び出す必要がありますか? 問題は、ブラウザーを最小化すると、div が再び重なり合うことです..

ありがとう

4

2 に答える 2

2

サイズ変更イベントにバインドする必要があると思います

$(document).ready(function(){
  var sidebar = document.getElementById('sidebar').offsetHeight;
  $(window).resize(function(){
    var footer = document.getElementById('footer').offsetHeight;
    document.getElementById('sidebar').style.height = sidebar - footer + 'px';
  });
});
于 2012-06-10T08:06:36.227 に答える
0

これは、かつてこの種のセットアップを検索した人のための解決策でもあります...

<script type="text/javascript">
$(document).ready(function(){
     var winh = document.body.clientHeight;
     var footer = document.getElementById('footer').offsetHeight;
     document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
     document.getElementById('sidebar').style.marginBottom = footer + 'px';
$(window).resize(function(){
     var winh = document.body.clientHeight;
     var footer = document.getElementById('footer').offsetHeight;
     document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
     document.getElementById('sidebar').style.marginBottom = footer + 'px';
     });
});
</script>

このコードは、document.ready 中とサイズ変更中の両方で、サイドバーの高さを動的に設定します。バートの助けに感謝します！

于 2012-06-10T19:53:06.533 に答える