Create Twitter bootstrap columns with the same height

Question

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

<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 higher than my [right side content]. Since my [Right Side Content] has a different background color, I would prefer it to reach my footer (the full height of my [Main Content].)

I tried setting height: 100% to the sidebar, but this did not have a visible effect in Chrome. Can anyone see how to do this?

Answer 1

I slightly changed the structure and element classes / identifiers.

 <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 CSS:

 #parent{ position: relative } #right-sidebar{ position: absolute; right: 0; height: 100%; background: blue; } .main-content{ background: red; } 

Answer 2

100% height does not work because the surrounding container requires a height property.

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

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

 #right-sidebar { background-color: red; display: table-cell; } .container { display: table; } .row-fluid { display: table-row; }