window.load函數不起作用

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()（見官方docs爲快捷鍵）

所以在這一點上你的代碼已經加載。剛剛嘗試：

$(function(){ 

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

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

}); 

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 

});