I have an element as follows

<div id="loadNavigation" style="width:20%"></div>
<div id="loadContent" style="width:80%"></div>

Essentially navigation is on the left, content on the right.

Now I am dynamically resizing both loadContent and loadNavigation on page load to be at a minimum height of the browsers window height. Though at points more likely then not one of the div's will exceed the other in length if it exceeds window height. To prevent this from happening as an example I want to increase loadNavigation to the same size as loadContent by getting the height value of loadContent.

So far I have tried:

function resizeAppWindow() {

    var windowHeight = getWindowHeight();
    var contentElement = document.getElementById("content");
    var contentHeight = (windowHeight - 25);

    contentElement.style.minHeight = contentHeight + "px";

    var currentContentHeight = contentElement.style.height;
    var navigationElement = document.getElementById("navigation");
    var differenceInHeight = currentContentHeight - windowHeight;
    var navigationHeight = (windowHeight + differenceInHeight);

    navigationElement.style.minHeight = navigationHeight + "px";
}

But currentContentHeight will return null. I beleive this is because the element has a style="min-height:00px;" but not an actual defined height?

Any pointers in the right direction would be appreciated.

I have an element as follows

<div id="loadNavigation" style="width:20%"></div>
<div id="loadContent" style="width:80%"></div>

Essentially navigation is on the left, content on the right.

Now I am dynamically resizing both loadContent and loadNavigation on page load to be at a minimum height of the browsers window height. Though at points more likely then not one of the div's will exceed the other in length if it exceeds window height. To prevent this from happening as an example I want to increase loadNavigation to the same size as loadContent by getting the height value of loadContent.

So far I have tried:

function resizeAppWindow() {

    var windowHeight = getWindowHeight();
    var contentElement = document.getElementById("content");
    var contentHeight = (windowHeight - 25);

    contentElement.style.minHeight = contentHeight + "px";

    var currentContentHeight = contentElement.style.height;
    var navigationElement = document.getElementById("navigation");
    var differenceInHeight = currentContentHeight - windowHeight;
    var navigationHeight = (windowHeight + differenceInHeight);

    navigationElement.style.minHeight = navigationHeight + "px";
}

But currentContentHeight will return null. I beleive this is because the element has a style="min-height:00px;" but not an actual defined height?

Any pointers in the right direction would be appreciated.

• javascript

• jQuery does a good job with this, and also offers other benefits. I use it for any application that isn't very minimal. – Andy Groff Commented Oct 20, 2010 at 3:33
• I use jQuery in most places and love it. However am not using it in this case. – Sphvn Commented Oct 20, 2010 at 3:36

1 Answer 1

Try offsetHeight:

var currentContentHeight = contentElement.offsetHeight; 

Take a look at this page for more height/width properties and how they handle across browsers - quirksmode.org