当屏幕分辨率随 jQuery 改变时做点什么

Question

我想在页面加载时将 div 的高度设置为窗口的高度...

所以我使用了下面的代码：

 $(document).ready(function () {
            var x = screen.availWidth;
            var y1 = screen.availHeight;
            var y2 = screen.Height;
            var w = $(window).height();
            var d = $(document).height();
            alert('availHeight : ' + y1);
            alert('Height : ' + y2);
            alert('window : ' + w);
            alert('document : ' + d);
            $('#OuterDiv').css({ 'height': w });
            //alert($('#OuterDiv').css('height'));
        });   //End Of $(document).reedy

问题 #1：

当屏幕分辨率发生变化时，该 div 仍具有以前的高度。
我该如何解决？

问题 #2：

我希望该 div 的 height=100%，由于一些 css 问题，我使用了 jQuery。
但是当页面加载时（在页面加载期间），div 的高度是其内容的高度，并且在 jQuery 工作之后，该 div 获得窗口的高度。

我认为这在页面加载期间不太好。
我该如何解决这个问题？

height:100% 不适用于该 div：

这就是原因 -> LINK

提前致谢

Answer 1

您可以像这样捕获调整大小事件：

$(window).resize(function() {
    alert($(window).width());
    alert($(window).height());
});

如果您想立即调整大小，请将脚本从 ready 事件中取出，并将其放在您的 div 正下方（也可以在 ready 时再次调用它）

例如

<div class="myDiv">Content</div>
<script>$('#myDiv').height($(window).height());</script>

Answer 2

你有什么理由不能只使用 CSS 吗？如果你将body的宽度和高度设置为100%，并且绝对定位你的div，你应该可以达到同样的效果。

这是您要查找的 jQuery 事件，它将 #box 设置为窗口的宽度和高度

$(document).ready(function() {
    var resizeBox = function() {
        $('#jq').css({width: $(window).width(), height: $(window).height()});
    };
    resizeBox();
    $(window).resize(resizeBox);
});

这是http://jsfiddle.net/JxWm9/4/ 的示例，其中包含一个用于比较的 CSS 框。请注意，JS 版本滞后是因为它基于 resize 事件，而 CSS resize 是浏览器本身的原生。