How to have multiple columns that consume 100% height using twitter bootstrap?
css, twitter-bootstrap
Solution
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.
Problem
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