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