當窗口大小調整或初次加載時，我調用了以下JQuery。我有一些問題，它似乎沒有按照預期的第一次加載工作。有人能告訴我什麼是故障嗎？Jquery在頁面加載/調整大小時調整div的大小

的JQuery（1.8.3）

function setContentHeight() { 
    var height = $(document).height(); 
    $('#content, #content > div:first-child').height(height - 242); 
    $('#content-text-description').height(height - 280); 
} 

$(window).resize(function(e) { 
    setContentHeight(); 
}); 

$(document).ready(function(e) { 
    setContentHeight(); 
});

HTML

<body> 
    <div id="container"> 
     <div id="banner"></div> <!-- Header --> 
     <div id="navi"></div> <!-- Navigation Pane --> 
     <div id="content"> <!-- Content loaded with include --> 
      <div id="home"> <!-- Start of content --> 
       <div id="content-text-description"></div> <!-- container for custom scroller --> 
      </div> 
     <div id="footer"></div> <!-- Footer --> 
    </div> 
</body>

CSS

body { 
    margin:0; 
    font-family:"Century Gothic"; 
    line-height:30px; 
} 

#container { 
    width:1024px; 
    margin: 0 auto; 
} 

#banner { 
    width:1024px; 
} 

#content { 
    width:1024px;   
    height:470px; 
    z-index:98; 
    float:left; 
    top:-7px; 
    overflow:hidden; 
} 

#footer { 
    text-align:center; 
    background:#59585D; 
    position:absolute; 
    bottom:0px; 
    width:1024px; 
    height:30px; 
    font-size:12px; 
    color:#ffffff; 
} 

#content-text-description { 
    padding-top:20px; 
    display:block; 
    width:800px; 
    z-index:3; 
    overflow:auto; 
}

據我所知，通過調整要求按預期的JQuery位應有的功能div加載文檔或調整窗口大小，但事實並非如此。

這是我做錯了什麼，或者是我想要達到的目標？

來源

2012-11-29 Albert

我通過播放一些代碼來修復它...

真的很簡單。

var height = $(document).height();

應更改爲：

var height = $(window).height();

來源

2012-11-29 14:55:35 Albert

Cdocument.ready事件還爲時過早，檢查高度，使用document.load事件，而不是

$（窗口）.resize（函數（E）{ setContentHeight（）; }）; （文件）.load（函數（e）{ setContentHeight（）; }）;

原因是document.load事件在整個dom被下載後很快被觸發。但是在那時候渲染還沒有發生，css可能不會被應用，圖像沒有被加載等，因此高度將不正確。

但是，在下載完所有內容並應用樣式之後，加載事件將被觸發，因此您應該獲得正確的高度。

無論如何，這不是你應該對腳本做的事情，而應該使用樣式。

來源

2012-11-29 14:55:13 BuddhiP

Jquery在頁面加載/調整大小時調整div的大小

的JQuery（1.8.3）

HTML

CSS

回答

相關問題