Full-height Fixed Left Sidebar implementation

Question

I'm trying to implement the following scenario, using Twitter Bootstrap and Fluid Layout :

• Left sidebar (I don't care whether the width is fixed or not) - occupying the WHOLE HEIGHT (no margins at all, like the sidebar in jsfiddle.net )
• The rightmost part of the content, will occupy the remaining part of the window (fluid)

I've tried setting it up like that, but it definitely doesn't work (there are margins everywhere and the columns definitely don't occupy all of the vertical space ) :

<div class="container-fluid" style="">
    <div class="row-fluid" style="">
        <div class="span3" style="">
        </div>

        <div class="span9" style='background:#fff;'>
        </div>
    </div>
</div>

Any ideas? How would you go about this?

Answer 1

Not totally sure but I think this might work...

Put height:100% on the html and body elements of your page.

Then give the element that you want to be the full height of the page a min-height:100%

Hope that helps.