Two-column layout with CSS: Last div on left to fill remaining area

I have a two column layout. When the two columns are of equal height, or the left column is longer, then it looks pretty g开发者_如何转开发ood. But if the left column is short, then I have a bunch of empty dark space that looks ugly.

Is there a CSS trick to "make the last box on the page fill the remaining space"?

I know it's a fairly regular question and I know of some ways to make a single element fill its container, but I've never heard of a way to only make the last element fill remaining space.

So far my ideas are to use images to create the look on the left so it can just extend all the way down as a background, or to use Javascript to compute the height dynamically. Images are not ideal because that would limit customizations somewhat and this page needs to be as easily customizable as possible. And I'm afraid using Javascript will result in noticeable "jerkyness" whenever you load a short page.

The only easy way to do this is with faux columns. Basically, you make your background image look like your column.

To extend the last element on the left column all the way down, you can use an absolute positioned element with an anchor on bottom:

#leftCol {
  position: absolute;
  bottom: 0px;
}

This ensures #leftCol is always attached to the bottom.

jsFiddel here

You can use min-height: 100% for the last left column

See solution here