How do I extend my sidebar the full height of the page?

Question

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.

Answer 1

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.