使用 jQuery 动态调整 div 的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15888685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically resize a div using jQuery
提问by CJH
I have a div(id="mainDiv") which I need to dynamically resize if the user changes the size of their browser window. I have written the following code to try and get this to work however this doesn't seem to be setting the height of my div:
我有一个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>
I don't know much jQuery, am I making an obvious mistake?
我不太了解 jQuery，我犯了一个明显的错误吗？
回答by Lewis
There are a few things going wrong here:
这里有一些问题：
- Your code will execute straight away before your document has finished loading.
- Your code will execute only on load of the the script, not on resize
- You're not setting the height of your mainDiv - you're setting the height of another element with the id: accordianMain (but I'm guessing you know that).
- 您的代码将在您的文档完成加载之前立即执行。
- 您的代码只会在脚本加载时执行，而不是在调整大小时执行
- 您不是在设置 mainDiv 的高度 - 您是在设置另一个具有 id 元素的高度：accordianMain（但我猜您知道这一点）。
You need to handle the browser resize event to wait for the browser to resize then get the dimensions of the window and apply accordingly. You'd do this by handling the window.resize event liks this:
您需要处理浏览器调整大小事件以等待浏览器调整大小然后获取窗口的尺寸并相应地应用。你可以通过处理像这样的 window.resize 事件来做到这一点：
var $win = $(window);
$win.on('resize',function(){
$("#mainDiv").height($win.height());
});
What you probably want to do is wait for for a resize to finish to by adding a timeout so that it doesn't fire too often as well:
您可能想要做的是通过添加超时等待调整大小完成，这样它也不会经常触发：
var timer,
$win = $(window);
$win.on('resize',function(){
clearTimeout(timer);
timer = setTimeout(function(){
$("#mainDiv").height($win.height());
}, 500);
});
回答by PlantTheIdea
You need to wrap it in a resize function:
您需要将其包装在调整大小功能中：
$(window).on('resize',function(){
var height = $(window).height();
$("#mainDiv").height(height);
});
Although I should point out what your doing could easily be attained through CSS:
虽然我应该指出你所做的事情可以通过 CSS 轻松实现：
body,#mainDiv {
height:100%;
}
This is more to point out the "it needs to be in a resize event wrapper" larger point, in case you wanted to do some logic that actually needed the event.
这更多是为了指出“它需要在调整大小事件包装器中”更大的点，以防您想做一些实际需要事件的逻辑。
回答by js1568
Use an event listener for the window resize (and you should wait for page load before accessing elements with JQuery):
使用事件侦听器调整窗口大小（并且您应该在使用 JQuery 访问元素之前等待页面加载）：
$(function() {
$(window).on('resize', function() {
var height = $(window).height();
$("#mainDiv").height(height);
});
});
回答by Adriano Galesso Alves
Yes, the mistake is use jquery hehehe
是的，错误是使用jquery hehehe
You do this with CSS
你用 CSS 做到这一点
<body>
<div id="mainDiv" style="height:100%"></div>
</body>
回答by Bahien Nguyen
I used div content and div footer in my page, i will set this code in my js to set dynamic height for div content.
我在页面中使用了 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);
