Сделайте что-нибудь, когда разрешение экрана изменится с помощью 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:

Я хочу, чтобы высота = 100% для этого div и из-за некоторых проблем css я использовал jQuery.
Но когда страница загружается (во время загрузки страницы), высота div является высотой его содержимого, и после этого jQuery этот div получает высоту окна.

Я думаю, что это нехорошо во время загрузки страницы.
Как я могу исправить эту проблему?

height:100% не работает для этого div:

Вот причина -> ССЫЛКА

Заранее спасибо

Answer 1

Вы можете зафиксировать событие изменения размера так:

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

Если вы хотите сразу изменить размер, извлеките сценарий из события ready и вставьте его в строку, прямо под div (и, возможно, вызовите его снова при готовности)

1007 * Е.Г. *

<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 resize является родным для самого браузера.