CSS Dynamic Vertical Height

I'm working on a new layout for my website and I want the user to be able to change views. One view is a static 540 pixels tall and horizontally/vertically centered. The second is no longer vertically centered and allows the content to define the height.

It's currently working with the first option, but in the second option, the utility column (2011 Browsers Usage Stats) does not fill the entire height. Is there a solution to this?

I don't know how much source code you want. I've listed a link to my website and the differences in CSS code below.

My Website

The first option (currently working):

#floater {
    margin-bottom: -27em; /* vertical center - half of container's height */
    height: 50%; /* vertical center */
}
#wrapper {
    height: 54em; /* vertical center */
}
#content {
    height: 33em; /开发者_JAVA百科* static height */
}

The second option (not working):

#floater {
    margin-bottom: 0em; /* vertical top */
    height: auto; /* vertical top */
}
#wrapper {
    height: auto; /* vertical 100% */
}
#content {
    height: 100%; /* dynamic height */
}

Consider what you're doing versus what you're saying:

#content {
    height: 100%; /* dynamic height */
}

but in the second option, the utility column (2011 Browsers Usage Stats) does not fill the entire height

You can only pick one. Do you want it to fill the entire height or be dynamic?