Question

如果用户更改了浏览器窗口的大小，我需要动态调整大小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，我犯了一个明显的错误吗？

Answer 1

这里有一些问题：

您的代码将在文档加载完毕之前立即执行。
您的代码只会在加载脚本时执行，而不是在resize
你没有设置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);

});

Answer 2

您需要将其包装在resize函数中：

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

虽然我应该指出你可以通过CSS轻松实现的目标：

body,#mainDiv {
    height:100%;
}

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

Answer 3

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

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

Answer 4

是的，错误是使用jquery hehehe

使用CSS

执行此操作

<body>
    <div id="mainDiv" style="height:100%"></div>
</body>

Answer 5

我在页面中使用了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);

使用jQuery动态调整div的大小

5 个答案: