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).
Figure 2 – Equal Height Columns that Don’t Stretch
In a second solution, the content would not scroll. Instead, you would be stuck with whatever showed up on the page (Figure 3).
Figure 3 – Non-Scrolling Equal Height Columns
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).
Figure 4 – The HTML for a Basic Bootstrap pPge
This basic syntax leads to three columns that stretch to fill their content (Figure 5).
Figure 5 – A Basic Bootstrap Layout
Making this work is just a matter of a few lines of CSS (Figure 6).
Figure 6 – CSS for Equal Height Columns in Bootstrap
It’s as easy as that. You can see the full syntax in action here.