Making Twitter Bootstrap Columns the Same Height

Question

I have an ASP.NET MVC view with the following Twitter Bootstrap layour:

<div class="container">
    <div class="container-fluid header">
        [Header content]
    </div>

    <div class="row-fluid">
        <div class="span9">
            <div class="container-fluid main-content">
                [Main Content]
            </div>
        </div>

        <div id="right-sidebar" class="span3">
            [Right Sidebar Content]
        </div>
    </div>
</div>

My problem is that my [Main Content] is much taller than my [Right Sidebar Content]. Since my [Right Sidebar Content] has a different background color, I would prefer that it ran all the way down to my footer (the full height of my [Main Content].)

I tried setting height: 100% to the sidebar but that had no visible effect in Chrome. Can anyone see how to achieve this?

Answer 1

I've change a little bit the structure and element's classes/ids.

<div class="container-fluid">
    <div class="row-fluid header">
        [Header content]
    </div>

    <div id="parent" class="row-fluid">
        <div class="span9 main-content">
                [Main Content]
        </div>
        <div id="right-sidebar" class="span3">
            [Right Sidebar Content]
        </div>
    </div>
</div>

And now the CSS:

#parent{
  position: relative
}

#right-sidebar{
  position: absolute;
  right: 0;
  height: 100%;
  background: blue;
}

.main-content{
  background: red;
}