1

ロード機能のJavaScriptウィンドウで小さな問題が発生しました。スクリプトの目的は、＃headerdivの高さを常に画面のサイズと等しくすることです。

ページを開いても表示されません#headerdiv（JavaScriptコードによって高さが追加されていないためだと思います）。ブラウザウィンドウのサイズを変更するとすぐに、＃headerdivが表示され、画面の高さにサイズ変更されます。だから私はそれが機能しないウィンドウロード機能だけだと思いますか？誰か提案がありますか？

これが私のコードです：

Javascript： 

<script>
$(function(){
    $(window).load(function(){ // On load
        $('#headerdiv').css({'height':(($(window).height()))  +'px'});
    });

    $(window).resize(function(){ // On resize
        $('#headerdiv').css({'height':(($(window).height()))+ 'px'});
    });
});     
</script>

Html + css：

<style>
    #headerdiv {width:100%; background:blue;padding:0;margin:0;overflow:auto;}​
</style>

<div id="headerdiv"></div>
4

3 に答える 3

5

すでに必要な$( window ).load()ようにそこに必要はありません（ショートカットについては公式ドキュメントを参照してください）$(function(){$( document ).ready()

したがって、この時点でコードはすでにロードされています。ちょうど試して：

$(function(){

   $('#headerdiv').css({'height':(($(window).height()))  +'px'});

   $(window).resize(function(){ // On resize
    $('#headerdiv').css({'height':(($(window).height()))+ 'px'});
   });

});
于 2012-12-14T10:14:44.173 に答える
2

すべての画像が読み込まれるのを待つ必要があるかどうかに応じて、次のいずれかを使用します。

$(window).load(function(){ // On load
  $('#headerdiv').css({'height':(($(window).height()))  +'px'});
});

$(function(){
   $(window).resize(function(){ // On resize
      $('#headerdiv').css({'height':(($(window).height()))+ 'px'});
   });
});

または@antyratによって与えられた答え。あなたはで包むべきではありませ$(window).loadん$(function()

于 2012-12-14T10:23:50.170 に答える
0

私は次のようにantyratの答え
を拡張します:( コードを繰り返す必要はありません）：

$(function(){

   $(window).resize(function(){ // On resize
       $('#headerdiv').css({'height':  $(window).height() + 'px'});
   }).trigger('resize'); //do the resize function on start

});
于 2012-12-24T15:34:11.163 に答える