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;
}

Answer 2

The height 100% doesn't work because the surrounding container needs a height property.

You can set a height of like 800px on the container to make your height 100% take effect. However, this does not make it equal to the main content, just a way to make them look not so different.

You can utilize display: table; for table like columns. http://jsbin.com/ojavub/1/edit

#right-sidebar {
  background-color: red;
  display: table-cell;
}

.container {
  display: table;
}

.row-fluid {
  display: table-row;
}