Get current height of element by id
<p>I have an element as follows</p>

<pre><code>&lt;div id="loadNavigation" style="width:20%"&gt;&lt;/div&gt;
&lt;div id="loadContent" style="width:80%"&gt;&lt;/div&gt;
</code></pre>

<p>Essentially navigation is on the left, content on the right.</p>

<p>Now I am dynamically resizing both <code>loadContent</code> and <code>loadNavigation</code> 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 <code>loadNavigation</code> to the same size as <code>loadContent</code> by getting the height value of <code>loadContent</code>.</p>

<p>So far I have tried:</p>

<pre><code>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";
}
</code></pre>

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

<p>Any pointers in the right direction would be appreciated.</p>
