Предыстория:

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

Статус-кво:

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

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

I Мы прикрепили jQuery к событию изменения размера окна, чтобы изменить размер div , если окно браузера не слишком маленькое, и удалить любое изменение размера в другом случае. Это делается путем проверки, является ли область просмотра выше или меньше, чем у документа . Если область просмотра меньше, чем документ , кажется, что содержимое больше, чем окно браузера, поэтому изменение размера не выполняется; в другом случае мы изменяем размер 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 должен быть изменен, но документ больше, чем высота окна , почему мой сценарий предполагает, что изменение размера не требуется, и изменение размера div было удалено.

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

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

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

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