Question

我在加载函数的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>

Answer 1

您$( window ).load() $(function(){已经$( document ).ready() $(function(){ $('#headerdiv').css({'height':(($(window).height())) +'px'}); $(window).resize(function(){ // On resize $('#headerdiv').css({'height':(($(window).height()))+ 'px'}); }); });（请参阅官方docs获取快捷方式）

所以此时你的代码已经加载了。试试吧：

{{1}}

Answer 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()

中

Answer 3

我会这样扩展antyrat's answer：
（无需重复代码）：

$(function(){

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

});

window.load函数不起作用

3 个答案: