2

我有一个div( id="mainDiv")，如果用户更改浏览器窗口的大小，我需要动态调整它的大小。我已经编写了以下代码来尝试让它工作，但这似乎并没有设置我的高度div：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    var height = $(window).height(); 
    $("#mainDiv").height(height);
</script>
<body>
    <div id="mainDiv"></div>
</body>

我不太了解jQuery，我是否犯了一个明显的错误？

4

5 回答 5

7

这里有一些问题：

  1. 您的代码将在您的文档完成加载之前立即执行。
  2. 您的代码将仅在加载脚本时执行，而不是在调整大小时执行
  3. 您没有设置 mainDiv 的高度 - 您正在使用 id:accordianMain 设置另一个元素的高度（但我猜你知道这一点）。

您需要处理浏览器调整大小事件以等待浏览器调整大小，然后获取窗口的尺寸并相应地应用。你可以通过处理 window.resize 事件来做到这一点：

var $win = $(window);

$win.on('resize',function(){
    $("#mainDiv").height($win.height());
});

您可能想要做的是通过添加超时等待调整大小完成，这样它也不会经常触发：

var timer,
    $win = $(window); 

$win.on('resize',function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        $("#mainDiv").height($win.height());
    }, 500);

});
于 2013-04-08T20:54:42.410 回答
2

您需要将其包装在调整大小函数中：

$(window).on('resize',function(){
    var height = $(window).height(); 
    $("#mainDiv").height(height);
});

尽管我应该指出您的工作可以通过 CSS 轻松实现：

body,#mainDiv {
    height:100%;
}

这更多地指出了“它需要在调整大小事件包装器中”更大的一点，以防你想做一些实际需要事件的逻辑。

于 2013-04-08T20:49:45.700 回答
1

是的，错误是使用jquery hehehe

你用 CSS 做这个

<body>
    <div id="mainDiv" style="height:100%"></div>
</body>
于 2013-04-08T20:54:06.673 回答
0

使用事件侦听器来调整窗口大小（并且您应该在使用 JQuery 访问元素之前等待页面加载）：

$(function() {
  $(window).on('resize', function() {
    var height = $(window).height(); 
    $("#mainDiv").height(height);
  });
});
于 2013-04-08T20:50:47.110 回答
0

我在页面中使用了 div 内容和 div 页脚，我将在我的 js 中设置此代码以设置 div 内容的动态高度。

 footer = $("div[data-role='footer']");
    content = $("div[data-role='content']");
    viewHeight = $(window).height();
    contentHeight = viewHeight - footer.outerHeight();
    contentHeight -= (content.outerHeight() - content.height());
    content.height(contentHeight);
于 2013-04-08T20:58:14.813 回答