CODEWITHSUNDEEP
jqueryheightcss
JCHASE11
JCHASE11

Reputation: 3941

100% Height columns

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.

Upvotes: 1

Views: 2993

Answers (5)

TingSter
TingSter

Reputation: 61

html, body {
     height: 100%;
     margin: 0;
}

And 

#your-container {
     height: 100%;
}

This one work for me.

Upvotes: 0

dSquared
dSquared

Reputation: 9825

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!

Upvotes: 4

Cesar Canassa
Cesar Canassa

Reputation: 20203

You also need to add height: 100% to all parent divs, not only html or body.

This should fix your website:

#toLeft, #colA, body {
    height: 100%
}

Upvotes: 0

Bram
Bram

Reputation: 765

ugg.. yes quirk. i usualy use the $(document).height() for that stuf. the body height is usualy only as hi as the content needs it to be so the 100% does not work.

Upvotes: 1

bobek
bobek

Reputation: 8020

You've got to use clearfix: http://www.webtoolkit.info/css-clearfix.html It's pure CSS

Upvotes: 0

Related Questions