当屏幕分辨率改变时用 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：

原因如下 -> 链接

谢谢提前

Answer 1

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

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

如果您想立即调整大小，请将脚本从就绪事件中取出，并将其内联放置在 div 正下方（并且可能在就绪时再次调用它）以及）

例如

<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 版本滞后，因为它基于调整大小事件，而 CSS 调整大小是浏览器本身原生的。