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.