使用 jQuery 动态调整 div 的大小答案

【问题标题】：Dynamically resize a div using jQuery使用 jQuery 动态调整 div 的大小
【发布时间】：2013-04-08 20:47:44
【问题描述】：

我有一个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，我是否犯了明显的错误？

【问题讨论】：

调整浏览器大小时，此代码不会运行。它立即运行，再也不会。
您需要将调整大小代码放入调整大小函数api.jquery.com/resize 并确保它已在文档中准备好
在使用百分比时，您可以轻松地为此使用 CSS，因为 div 是整个窗口。

标签： javascript jquery html

【解决方案1】：

这里有一些问题：

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

});

【讨论】：

【解决方案2】：

你需要把它包装在一个调整大小的函数中：

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

虽然我应该指出您所做的事情可以通过 CSS 轻松实现：

body,#mainDiv {
    height:100%;
}

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

【讨论】：

虽然我同意 CSS 是一个更好的解决方案，但不能保证 height:100% 将与这里使用的 CSS 一样工作，因为 body 可能不是 1005窗口高度。
"这里使用的 CSS" ...这里没有 CSS。使用他提供的 HTML，并且缺少示例中的任何其他 CSS 或元素……是的，它会起作用。问题中的简单示例产生解决方案中的简单示例。
是什么让你认为 body 将是窗口的 100% 高度？
您需要将 html、body、#mainDiv 设置为 100%
对，我只是想帮忙！这将在 JS fiddle 中工作，但在一个完整的浏览器中尝试，其中 body 没有占据窗口的完整高度。这不是一场小便比赛，不要相信我的话：stackoverflow.com/questions/14151663/…

【解决方案3】：

是的，错误是使用jquery嘿嘿嘿

你用 CSS 来做这个

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案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);

【讨论】：