views:

104

answers:

3

Hi, im trying to set the height of two divs on my page, because my page content is dynamic. But it wont work. The height is just one screen of the divs.

The divs contain side borders, thats why it has to be all the way. Any ideas why the height only = one screen height?

function bodyHeight() {
    var scnHei;

    if (self.innerHeight) // all except Explorer
    {
        scnHei = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight)
        // Explorer 6 Strict Mode
    {
        scnHei = document.documentElement.clientHeight;
    }
    else if (document.body) // other Explorers
    {
        scnHei = document.body.clientHeight;
    }

    document.getElementById("bgr_right").style.height=scnHei + "px";
    document.getElementById("bgr_left").style.height=scnHei + "px";
}

Here is where I call the function:

<body onload="bodyHeight();">

UPDATE: + added "px"; but DOESNT WORK EITHER...

+2  A: 

This is only firing once, when the body is loaded. If you have an event that makes another call to BodyHeight(); then this should work.

Chris Ballance
not right but the best answer
Camran
A: 
.style.height=scnHei;

should rather be

.style.height=scnHei + "px";

The same goes for .style.width of course. You forgot to add the unit to the width / height value.

Max
A: 

Height and width properties require a unit (either "%" or "px"). Try this:

.style.height = scnHei + "px";
Eric Normand