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的高度= 100％，并且由于一些css问题，我使用了jQuery 但是当页面加载时（在页面加载期间）div的高度是它的内容的高度，并且在jQuery工作之后，该div获得窗口的高度。

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

height:100%不适用于该div：

这是原因 - ＆gt; LINK

提前致谢

Answer 1

您可以像这样捕获resize事件：

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

如果您想立即调整大小，请将脚本从准备好的事件中取出，并将其直接放在div下方（也可以在准备好后立即调用）

E.g。

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

Answer 2

你有什么理由不能只使用CSS吗？如果你将身体的宽度和高度设置为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调整大小是浏览器本身的原生。

使用jQuery更改屏幕分辨率时执行某些操作

2 个答案: