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

Question

Фон:

Я пытался решить вопрос 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, поэтому мой сценарий предполагает, что изменение размера не требуется, а div Изменение размера удалено.

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

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

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

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

Answer 1

Хорошо - стираю мой старый ответ и заменяю ...

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

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

1. Окно загружается
2. Div увеличивается до высоты окна
3. Окно сжимается
4. Высота документа остается на высоте div
5. Высота окна меньше высоты 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"

Answer 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");  
    }           
});

Answer 3

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