当窗口大小调整或初次加载时，我调用了以下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

回答

相关问题