使用jQuery动态调整div的大小
[英]Dynamically resize a div using jQuery
问题描述
我有一个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，我犯了一个明显的错误吗？
5 个解决方案
解决方案1
5 已采纳 2013-04-08 20:54:42
这里有一些问题：
- 您的代码将在文档加载完毕之前立即执行。
- 您的代码将仅在脚本加载时执行，而不在调整大小时执行
- 你没有设置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
2 2013-04-08 20:49:45
您需要将其包装在调整大小函数中：
$(window).on('resize',function(){
var height = $(window).height();
$("#mainDiv").height(height);
});
尽管我应该指出，通过CSS可以轻松实现您的操作：
body,#mainDiv {
height:100%;
}
这更多是指出“需要在调整大小的事件包装器中”较大的一点，以防您想要执行一些实际需要该事件的逻辑。
解决方案3
0 2013-04-08 20:50:47
使用事件监听器来调整窗口大小（在使用JQuery访问元素之前，您应该等待页面加载）：
$(function() {
$(window).on('resize', function() {
var height = $(window).height();
$("#mainDiv").height(height);
});
});
解决方案4
0 2013-04-08 20:54:06
是的，错误是使用jquery hehehe
你用CSS做到这一点
<body>
<div id="mainDiv" style="height:100%"></div>
</body>
解决方案5
0 2013-04-08 20:58:14
我在我的页面中使用了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);
在窗口调整大小时动态更改div jquery的高度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.