Jquery 在页面加载/调整大小时调整 div 的大小

标签 jquery css html

我有以下 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 的大小来按预期运行,但事实并非如此。

是我做错了什么还是我想实现的不可能?

最佳答案

我通过再玩代码修复了它...

真的很简单。

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

应更改为:

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

关于Jquery 在页面加载/调整大小时调整 div 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13628373/

相关文章:

javascript - 局部错误事件之前的全局 ajaxError 事件

javascript - jQuery SlideToggle 不适用于语义上不相邻的元素

javascript - promise 的单一错误处理程序

Ionic App 中的 CSS 问题

jquery - 当文本在 flash 或 jquery 谷歌地图上滚动时,固定 div 中的文本字体粗细会发生变化,为什么以及如何处理它?

javascript - 在 html javascript 中创建一个简单的成本估算器。从 HTML 按钮调用 JS 函数。 JS 中返回一个值

html - 内联 flex 盒元素填充调整问题

javascript - 当长度超过特定长度时如何以不同方式格式化文本?

javascript - jquery获取输入变化时的值

javascript - 如何使用 css 降低 <p> 内容区域的高度?