Question

I have created a responsive layout which you can find here: http://pixelcakecreative.com/cimlife/responsive/

The left and right columns are simply placeholders for a site skin (left and right full page advertisement). I need both of these columns to extend to the very bottom of the page. Both html and body have a height of 100%, but for some reason I cannot get these columns to extend to the bottom with min-height:100%

Any ideas? I am looking for a pure css solution, but jquery is an option.

Answer 1

The jQuery solution would be:

// Set Left Column ONLY if Shorter than Document Height //
if ($('#toLeft').height() < $(document).height()){
    $('#toLeft').css('height', $(document).height()+'px');
}

// Set Right Column ONLY if Shorter than Document Height //
if ($('#toRight').height() < $(document).height()){
    $('#toRight').css('height', $(document).height()+'px');
}

I hope this helps!