Использование Javascript для установки высоты DIV на 100%, что вызывает проблемы с кросс-браузером

Question

Мне нужна боковая панель div и содержимое div с высотой, которая всегда равна 100% высоты контейнера, независимо от содержимого. Размер контейнера изменяется при изменении размера окна. Я не могу использовать фон, чтобы подделать эффект. Я должен спроектировать для IE6 и решил использовать Javascript, чтобы попытаться создать кросс-браузерное решение.

Обычно, когда страница загружается, функция находит offsetHeight контейнера, вычитает offsetHeight заголовка и устанавливает style.height боковой панели и содержимое div равным результату.

Из-за ошибки бесконечного цикла в IE6 мне пришлось реализовать функцию, которая проверяет, действительно ли окно было изменено.

Он отлично работает в FF (На самом деле, я получил нужный эффект в FF без какого-либо JavaScript, но я отвлекся ...), но в IE6 содержание div на самом деле увеличивается * на 1014 * в размер каждого события изменения размера. Высота увеличивается ровно на 6 пикселей.

Редактировать: я хотел добавить, что код на самом деле работает нормально при увеличении размера окна, но не при уменьшении размера окна.

Вот ссылка на скрипку: Здесь

Javascript:

var setup = {
viewWidth: undefined,
viewHeight: undefined,
newViewWidth: undefined,
newViewHeight: undefined,
resizeTimeout: undefined,

findView: function() {
    if (typeof window.innerWidth != 'undefined') {
        viewWidth = window.innerWidth;
        viewHeight = window.innerHeight;
    }

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewWidth = document.documentElement.clientWidth;
        viewHeight = document.documentElement.clientHeight;
    }
},

windowCheck: function() {

    setup.findView();

    if (setup.viewWidth != setup.newViewWidth || setup.viewHeight != setup.newViewHeight) {
        setup.resizeTimeout = window.setTimeout(setup.onResize, 10);
    };


},

 onResize: function() {
    var head = document.getElementById("viewportheader").offsetHeight;
    var content = document.getElementById("container").offsetHeight;



    document.getElementById("listing").style.height = content - head + 'px';
    document.getElementById("viewport").style.height = content - head + 'px';

    document.getElementById("tester2").innerHTML = content;
    document.getElementById("tester").innerHTML = content - head;


    setup.newViewWidth = document.documentElement.clientWidth;;
    setup.newViewHeight = document.documentElement.clientHeight;

    window.clearTimeout(setup.resizeTimeout);
 }
};


function start() {
    setup.onResize();
    window.onresize = resize;

}

function resize() {
    setup.windowCheck();
}

window.onload = start;

Answer 1

РЕДАКТИРОВАТЬ: Вот еще более простое решение!

Для элементов, по которым вы вычисляете высоту из (#viewportheader, #container), просто установите их свойства переполнения на скрытые (overflow: hidden;). Это заставит их игнорировать размеры его дочерних элементов и просто изменить их размер до родительской ширины / высоты.

- Альтернативное решение -

onResize: function() {
    // You need to reset the heights before you do your calculations
    document.getElementById("listing").style.height = '0px';
    document.getElementById("viewport").style.height = '0px';

    var head = document.getElementById("viewportheader").offsetHeight;
    var content = document.getElementById("container").offsetHeight;


    document.getElementById("listing").style.height = content - head + 'px';
    document.getElementById("viewport").style.height = content - head + 'px';

    document.getElementById("tester2").innerHTML = content;
    document.getElementById("tester").innerHTML = content - head;

    // IE uses offsetWidth/Height, you'll need to check for this
    setup.newViewWidth = document.documentElement.offsetWidth;
    setup.newViewHeight = document.documentElement.offsetHeight;

    window.clearTimeout(setup.resizeTimeout);
}

Есть несколько проблем, которые складываются вместе с На самом деле после тестирования у вас есть только одна проблема, создающая эту проблему в IE6.

Когда div имеет ширину или высоту до 100%, он также учитывает его дочерние элементы. Если, скажем, ширина документа была рассчитана на 100px, а ширина div была установлена ​​на 100%, то рассчитанная ширина div также равна 100px. Но если вы изменили размер его потомков до 100px, то измените размер документа до 80px, даже если ширина div установлена ​​на 100%, он все равно останется равным 100px, а не будет изменен до 80px. Это потому, что его дочерние элементы имеют размер больше 80 пикселей, поэтому размер div будет соответствовать его дочерним элементам.