Question

I need a sidebar div and a content div with a height that is always 100% of the container height, regardless of the content. The container size changes when the window size changes. I can’t use a background to fake the effect. I have to design for IE6 and decided to use Javascript to try and come up with a cross-browser solution.

Basically, when the page is loaded, a function finds the offsetHeight of the container, subtracts the offsetHeight of the header, and sets the style.height of the sidebar and content div equal to the result.

Because of an infinite loop bug in IE6 I had to implement a function that checks if the window has actually been resized.

It works fine in FF (Actually, I got the effect I wanted in FF without any Javascript at all, but I digress…), but in IE6 the content div actually increases in size on each resize event. It increase in height by exactly 6 pixels.

Edit: I wanted to add that the code actually works fine when increasing the size of the window, but not when decreasing the size of the window.

Here’s a link to the fiddle: Here

The 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

EDIT: Here’s an even easier solution!

With the elements you’re calculating the heights from (#viewportheader, #container), just set their overflow properties to hidden (overflow: hidden;). This will make them ignore the sizes of its children and just resize to its parent width/height.

— Alternative solution —

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

There are a few problems that add together to Actually after testing, you only have one problem creates this issue in IE6.

When a div has a width or height to 100%, it also takes into consideration it’s children. If, say, the width of the document was calculated at 100px, and the div’s width was set to 100%, then the div’s calculated width is 100px too. But if you have resized it’s children to 100px too, then resize the document to 80px, even though the div’s width is set to 100%, it will still stay as 100px and not resize to 80px. This is because it’s children are larger than 80px, as so the div will resize to fit it’s children.