A great solution for making columns full height does not exist. Going into your CSS and setting an element to height: 100% rarely works. Several solutions have popped up to take multiple columns and make them equal height. However, none on their own seem to work for my particular situation.
Here’s the basic problem: Starting with Bootstrap 2.0 as a base, we want to make a multi-column layout that stretches at least the height of the page (Figure 1).
Figure 1 – Full Height Columns in Bootstrap
When I was building this, I encountered two solutions that partially worked. In one solution, the three columns would be of equal height, but if all the content was shorter than the page, then the columns wouldn’t stretch to the bottom (Figure 2).
In a second solution, the content would not scroll. Instead, you would be stuck with whatever showed up on the page (Figure 3).
Luckily, there are concepts we can take from both of these solutions to achieve our goal. First, start with your basic page scaffolding (Figure 4).
This basic syntax leads to three columns that stretch to fill their content (Figure 5).
Making this work is just a matter of a few lines of CSS (Figure 6).
It’s as easy as that. You can see the full syntax in action here.