jQuery代碼檢查似乎頁面高度無法正常工作

Question

我有一個可愛的小片的jqery代碼在這裏：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
hasVBar=""; 
hasHBar=""; 
$(document).ready(function() { 
    // Check if body height is higher than window height :) 
    if ($(document).height() > $(window).height()) { 
     // alert("Vertical Scrollbar! D:"); 
    hasVBar="y"; 
    } 

    // Check if body width is higher than window width :) 
    if ($(document).width() > $(window).width()) { 
     //alert("Horizontal Scrollbar! D:<"); 
    hasHBar="n"; 
    } 
}); 
</script> 

在我的html頁面第一個div

現在是在高度200像素，下方是包含3另一個DIV分別在不同的div中。我通過javascript onclick隱藏了這3段。問題是，即使這3個div處於隱藏狀態（display：none和visibility：hidden），垂直滾動條也顯示出來。因爲我期望垂直滾動條只有在這三個div的任何組合足以使文檔的高度高於窗口高度時纔會彈出。至少在頁面打開時（至少3個div處於隱藏狀態）。

我希望我能夠使我的查詢清楚。 任何建議??? 謝謝..提前...

window.onload=function starterJobs(){ 
document.getElementById('abtpri').style.visibility='hidden';  
document.getElementById('abtpri').style.display='none'; 
} 


<script type="text/javascript"> 
function hidePara(whichId) { 
showhide = document.getElementById(whichId).style.display; 
if (showhide=='block') { 
document.getElementById(whichId).style.display='none'; 
document.getElementById(whichId).style.visibility='hidden'; 
} else { 
document.getElementById(whichId).style.display='block'; 
document.getElementById(whichId).style.visibility='visible'; 
} 
} 
</script> 


<div style=" position:relative;background:none; width:auto; height:25px; padding:10px 0px 10px 0px;"> 
<div style="position:relative; top:0px; left:0px; background:transparent url(lftarw.gif) no-repeat; width:25px; height:25px; cursor:pointer" onclick="hidePara('abtpri'); "></div> 
<div id="printing1" class="h1type4" style="position:relative; top:-25px; left:25px; background-color:none; width:auto; height:20px; padding-top:5px; margin-right:25px;">Printing</div> 
</div> 
    <div id="abtpri" style="padding-left:25px;"> 
    ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    </div> 

Answer 1

這是因爲你爲每個div定義高度。 即使它們不可見，它們仍然應該佔據這個空間。

沒有高度時，div應該展開以適應可見內容，隱藏時消失。

Answer 2

使用如下語句：

$(document).ready(function() { 
    if (window.innerHeight < document.body.scrollHeight) 
     alert('Vertical Scroll Bar !!!') 
    else alert ('No vertical scroll bar!'); 
}); 

樣品：http://zequinha-bsb.int-domains.com/windowvsbrowserheight.html