Использование Javascript для изменения размера экрана до высоты экрана вызывает мерцание при сокращении окна браузера

Фон:

Я попытался решить вопрос StackOverflow еще одну задачу компоновки HTML/CSS - боковую панель высочайшего уровня с липким нижним колонтитулом самостоятельно, используя jQuery. Поскольку боковая панель в моем случае может быть длиннее основного содержимого, она соответствует случаю комментарий 8128008. Это делает невозможным иметь боковую панель дольше, чем основное содержимое, и иметь липкий нижний колонтитул без проблем при сокращении окна браузера.

Статус-кво:

У меня есть html-страница с div, которая автоматически растягивается, чтобы заполнить экран. Поэтому, если пустое пространство ниже элемента, я растягиваю его вниз:

Но если окно просмотра браузера меньше самого div, растягивание не выполняется, но появляется полоса прокрутки:

Я подключил jQuery к событию изменения размера окна, чтобы изменить размер div, если окно браузера не будет маленьким и удалит любое изменение размера в другом случае. Это делается путем проверки, что область просмотра больше или меньше, чем document. Если область просмотра меньше, чем document, кажется, что содержимое больше, чем окно браузера, почему изменение размера не выполняется; в другом случае мы изменим размер div, чтобы заполнить страницу.

if ($(document).height() > $(window).height()) {
    // Scrolling needed, page content extends browser window
    // --> No need to resize the div
    // --> Custom height is removed
    // [...]
} else {
    // Window is larger than the page content
    // --> Div is resized using jQuery:
    $('#div').height($(window).height());
}

Проблема:

До сих пор все работает хорошо. Но если я сокращаю окно браузера, бывают случаи, когда размер div должен быть изменен, но document больше высоты window, почему мой script предполагает, что не требуется изменение размера и div изменение размера.

Фактически, точка, если я проверяю высоту document, используя Firebug после появления ошибки, высота имеет только значение, которое должно было иметь. Поэтому я подумал, что высота document установлена с небольшой задержкой. Я попытался запустить код изменения размера немного, но это не помогло.

Я установил демонстрацию на jsFiddle. Просто медленно снимите окно браузера, и вы увидите мерцание div. Также вы можете смотреть вывод console.log(), и вы заметите, что в случае "мерцания" высота document и высота window различаются, а не равны.

Я заметил это поведение в Firefox 7, IE 9, Chrome 10 и Safari 5.1. Вы можете это подтвердить?

Знаете ли вы, есть ли исправление? Или это подход совершенно неправильный? Пожалуйста, помогите мне.

Ответ 1

Ок - очистка моего старого ответа и замена...

Вот ваша проблема:

Вы берете и сравниваете высоту окна и документа, не принимая во внимание порядок событий здесь.

Загрузка окна
Div растет до высоты окна
Окно сжимается
Высота документа остается на высоте div
Высота окна меньше высоты div

В этот момент ранее установленная высота div сохраняет высоту документа больше высоты окна, и эта логика неверно истолкована: "Прокрутка необходима, нет необходимости расширять боковую панель", ошибочно

Следовательно, подергивание.

Чтобы предотвратить это, просто измените размер своего div вместе с окном перед проведением сравнения:

(function () {
    var resizeContentWrapper = function () {
            console.group('resizing');


            var target = {
                content: $('#resizeme')
            };

            //resize target content to window size, assuming that last time around it was set to document height, and might be pushing document height beyond window after resize
        //TODO: for performance, insert flags to only do this if the window is shrinking, and the div has already been resized
            target.content.css('height', $(window).height());

            var height = {
                document: $(document).height(),
                window: $(window).height()
            };

            console.log('height: ', height);


            if (height.document > height.window) {
                // Scrolling needed, no need to externd the sidebar
                target.content.css('height', '');

                console.info('custom height removed');
            } else {
                // Set the new content height
                height['content'] = height.window;
                target.content.css('height', height['content']);

                console.log('new height: ', height);
            }
            console.groupEnd();
        }
    resizeContentWrapper();
    $(window).bind('resize orientationchange', resizeContentWrapper);
})(jQuery);

За комментарий pmvdb, я переименовал ваш $$ в "target"

Ответ 2

$(window).bind('resize',function(){
    $("#resizeme").css("height","");

    if($("#resizeme").outerHeight() < $(window).height()){
       $("#resizeme").height($(window).height());
       $("body").css("overflow-y","hidden");  
    }else{
       $("body").css("overflow-y","scroll");  
    }           
});

Ответ 3

Возможно, я неправильно понимаю проблему, но почему вы используете Javascript? Это похоже на проблему с макетом (CSS). Мое решение без JS: http://jsfiddle.net/2yKgQ/27/