Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to have multiple columns that consume 100% height using twitter bootstrap?

I have seen a number of similar questions, but have not found an answer for what I am looking for. Further information is as follows:

  • I am using twitter bootstrap, so I would like a solution that is compatible with it
  • The layout will look like this. Sorry I cannot embed the image because I need 10 pts first.
  • This is as close as I have gotten so far. The problem is that I cannot get the sidebar to stop at the footer.
  • I will need the main content to expand the same as the sidebar.
  • The sidebar and Main Content are two different colors and vary in size. They must both extend to the footer
  • Notice that the minimum height must be 100%
  • The footer should move if the content grows too much (i.e. it would require scrolling to see it)
  • I do no want to use JavaScript, but if it is required I wouldn't mind a solution with so long as it is progressively enhanced with the JS (I am also using jQuery).
  • The page content is centered horizontally with a fixed width
like image 483
John Kholler Avatar asked Apr 20 '12 02:04

John Kholler


2 Answers

I think this might be, what you are looking for: two column layout source.

The main idea is to set height: 100% on both <body> and <html> and then make sure that the container also takes up all the height (via min-height: 100%). You might notice that code also contains workaround for IE6, because it was originally written, when fighting IE6 was just another day of work.

This was made by modifying a bit more complicated and more often used holy grail layout source.

like image 134
tereško Avatar answered Oct 27 '22 08:10

tereško


Via css it may be possible but need some tricks.

You need to make both divs/columns very very tall by adding a padding-bottom: 1000px and then "trick the browser" into thinking they aren't that tall using margin-bottom: -1000px. It is better explained via example below.

http://jsfiddle.net/mediasoftpro/Ee7RS/

Hope this will be ok.

like image 21
irfanmcsd Avatar answered Oct 27 '22 07:10

irfanmcsd