5

jsFiddle

<div id="wrapper" class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="span2 sidebar">sidebar</div>
            <div class="span10 content">content</div>
        </div>
    </div>
</div>

I've been searching Google for the past few hours trying to find a solution. I don't think I can do Faux Columns because the site is built on Bootstrap, so the sidebar width will change depending on the width of the browser.

KyleMit
  • 30,350
  • 66
  • 462
  • 664
Derek
  • 5,137
  • 9
  • 28
  • 39
  • possible duplicate of [How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?](http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh) – iambriansreed May 20 '13 at 22:00

1 Answers1

4

You must first set both the html and body to height: 100%. Then, if you don't have a navbar, also the sidebar to height: 100%.

If you are using a non-fixed navbar, you must use absolute positioning.

Absolute positioning is anyway another way to solve this. After having the height of body and html set to 100%, set bottom: 0 and top: 0, together with position: absolute. And you must know that the absolute positioning is computed relative to the closes parent having position: relative.

Gabriel Petrovay
  • 20,476
  • 22
  • 97
  • 168