Get current element height by id

Question

I have the following item

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

Essentially navigation on the left, content on the right.

Now I dynamically resize both loadContent, and loadNavigationwhen loading the page to the minimum height of the height of the browser window. Although at points it is more likely that none of the div will exceed the other in length if it exceeds the height of the window. To prevent this from happening, I want to increase it loadNavigationto the same size as when I loadContentreceived the height value 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 currentContentHeightwill return null. I believe that it is because the element has style="min-height:00px;", but not a certain, specific height?

It would be helpful to evaluate any pointers in the right direction.

Answer 1

offsetHeight:

var currentContentHeight = contentElement.offsetHeight; 

, - quirksmode.org