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?

[Equal height columns](http://stackoverflow.com/questions/2114757/css-equal-height-columns) is an old problem in CSS. It has nothing to do with Bootstrap. — Pavlo, Feb 02 '13 at 21:09
True, but perhaps Jonathan was hoping that bootstraps has a build in solution. at least I did ;) — JP Hellemons, Aug 28 '13 at 07:52

cortex · Answer 1 · 2013-02-02T20:03:10.110

10

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

edited Feb 02 '13 at 20:03

answered Feb 02 '13 at 19:57

cortex

5,036
3
31
41

D'oh! Had to run out after posting yesterday. In fact, I had got the `
`s mixed up when I posted. In fact, they *are* as you've suggested. Sorry about that. Checking the CSS...
– Jonathan Wood Feb 03 '13 at 18:17
1

This solution breaks when the height of the main content is greater than the height of the sidebar (at least in Chromium). – i.amniels Sep 30 '13 at 14:45

score 2 · Answer 2 · answered Feb 02 '13 at 19:50

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

Making Twitter Bootstrap Columns the Same Height

2 Answers2