1

每当调整窗口大小或首次加载时，我都会调用以下 JQuery。我有一些问题，它在第一次加载时似乎没有按预期工作。有人可以告诉我什么是故障吗？

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 的大小来按预期工作，但事实并非如此。

是我做错了什么还是我试图实现的目标是不可能的？

4

2 回答 2

0

Cdocument.ready 事件检查高度太早，请改用 document.load 事件

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

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

原因是 document.load 事件在整个 dom 被下载后不久被触发。但是在那个时间渲染还没有发生，可能没有应用css，没有加载图像等。因此高度将不正确。

但是在下载所有内容并应用样式后会触发 load 事件，因此您应该获得正确的高度。

无论如何，这不是你应该用脚本做的事情，而是用样式来做。

于 2012-11-29T14:55:13.827 回答
0

我通过更多地使用代码来修复它......

真的很简单。

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

应改为：

var height = $(window).height();
于 2012-11-29T14:55:35.013 回答