Get current height of element by id

Question

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.

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