Make html column extend all the way down without breaking layout

Question

I have this layout: http://jsfiddle.net/spadez/BN9KJ/2/

It works by having an optional left column. How can I get the column colour extend all the way down the page even if there isn't enough content to fill it.

I was thinking it would be something like this:

height: auto;

But that doesn't seem to work

Answer 1

add the following css

html,body{
height:100%;
}

and then apply height: 100% for the divs

working fiddle

Answer 2

The Logic: setting the height of the body,html element,because it is the parent element..!!

BUT why should we give both html and body --> height:100% ?? the answer is https://stackoverflow.com/a/6654996/2967572

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.

just give

#left_column {
    width: 250px;
    background-color: orange;
    float: left;
  height:100%;  //added

}

along with

html,body{

    height:100%;
}

DEMO

BUT

However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

it will be good alternative to give min-height

  #left_column {
        width: 250px;
        background-color: orange;
        float: left;
      min-height:100%;  //added

    }

DEMO with Min-height