The css problem of the vertical column is a common one. Say you have a website with a sidebar that has a colored background, and you want it to extend all the way to the bottom even when you can’t control the amount of content in the content area or even sidebar (and thus knowing its height).
Here’s an example of what I’m talking about:
So we want the sidebar to extend all the way to the bottom. The css solution is not at all intuitive.
#wrapper {
overflow: hidden;
}
#sidebar {
padding-bottom: 999em; /* or any large number */
margin-bottom: -999em; /* equally large number */
}
Applied to the example above, it will make it look like this:
It works by creating a huge amount of padding at the bottom of the sidebar container, and then taking it all away again with the margin. This would make the sidebar flow far out of the surrounding container (overflow), so we add overflow: hidden; to hide whatever spills out.
In case you have a lot of content in the sidebar, you may want to apply the same to the content area to make sure that extends to the bottom as well.