How to fix 100% height being calculated as 0 px with dynamic data

Question

I have a page that I have started building with the Twitter Bootstrap css file. I want my .container-fluid.sidebar and .container_fluid.content to be 100% of the window and have automatic independent scroll bars. When I set the sidebar and content to the following

.container-fluid>.sidebar{position:absolute;top:42px;left:20px;width:240px; overflow-y:auto;overflow-x:visible;min-height: 94%;}
.container-fluid>.content{top:42px;margin-left:240px;overflow-y:auto;overflow-x:visible;min-height: 94%;height:94%;}

The heights get calculated as 0px. I have dynamic data that is filling these items so they just start off as

<div class="container-fluid" id="main">
    <div id="navigation" class="sidebar">
        <ul class="treeview"/>
    </div>

    <div id = "mainwindow" class="content">
        <div id="update_panel"/>
    </div>
</div>

I have confirmed that all the dynamic data is populating correctly by setting the heights manually to 600 px.

Answer 1

I managed to figure this out by removing an extra tag that I had encapsulated most of the page in for no good reason. It is working now with just css.

Answer 2

Only way that I know how to do this is via JavaScript and "dhtml". The following should do the trick for you and will also resize if the user resizes the window. One thing that can be problematic is what happens when a horizontal scrollbar gets added that changes the amount of vertical client area available.

The getClientHeight routine should be cross-browser safe and all modern browsers support getElementById.

function getClientHeight() {

var windowHeight = window.innerHeight ? window.innerHeight :

                          (document.documentElement && document.documentElement.clientHeight ?

                          document.documentElement.clientHeight : document.body.clientHeight);

return windowHeight;

} //function getClientHeight

// this routine will set the "height" of the "mainindow" and "naviagtion" DIVS

  function sizeDivs() {

    var cH = getClientHeight();

        var eMW = document.getElementById('mainwindow');

    eMW.style.height = cH + 'px';

    var enav = document.getElementById('navigation');

    enav.style.height = cH + 'px';

  } // function sizeDivs

function loadEvent(e) {

sizeDivs();

} // function loadEvent

// this is the window "resize" handler - when the window size changes we want to resize our DIVS

var resizeTimer;

function handleResize() {

  clearTimeout(resizeTimer); 

  resizeTimer = setTimeout(sizeDivs, 200); 

} // handleResize

// now is the time to set the page load and resize handlers

window.onload = loadEvent;

window.onresize = handleResize;