Take the 2-minute tour ×

I have now searched for hours, but haven't found a solution yet. I hope anyone out there can help me :)

I searched and found the following script: http://jsfiddle.net/tcaVN/81/

This script is great but if the div#center isn't full of content, it looks like the following: jsfiddle.net/tcaVN/80/

I actually want to resize it to 100% height even if it isn't full of content. Is this possible and if yes: How? I really don't get it.

Many thanks in advance!

Edit: Thank you all for your help!

With my own design it now looks like this: http://jsfiddle.net/tcaVN/102/ The problem is, that you now can scroll even if there is no content.

Edit2: I have found the issue! There was a padding too much in #content.

share|improve this question
Do you want #center to be 100% width? I'm not sure I fully understand your question here. Did you want #left to be up against the side? –  bassplayer7 Feb 26 '12 at 0:32
are those examples supposed to be different? –  hooleyhoop Feb 26 '12 at 0:36
Hey! No, I want #center to be 100% HEIGHT. #left should stay as it is. –  Maddin Feb 26 '12 at 0:36
for which browser,it's not working? it looks ok in firefox. –  N30 Feb 26 '12 at 0:37
Maybe this example is better: jsfiddle.net/tcaVN/83 I actually want that #center's height is 100%, but if there is more content it should look like jsfiddle.net/tcaVN/81 (with content scrolling only) Or in other words: It should always look like jsfiddle.net/tcaVN/81 even if in #center is no or less content. –  Maddin Feb 26 '12 at 0:38

3 Answers 3

up vote 3 down vote accepted

my answer is here..



http://jsfiddle.net/tcaVN/103/ ( this is with text which extends beyond body, just added to show that css changes works for both the cases.. )

what i did was added

height:100% to html,body and #bind

and added min-height:100% to #center

based on this


share|improve this answer
This is good, but if I try it on my own design there is a scrollbar even if there is no content: jsfiddle.net/tcaVN/102 –  Maddin Feb 26 '12 at 1:18

This should work.

The likely problem is that you assume that the body and html containers default to 100% width and 100% height. This is not the case. By default, the width is 100% but the height adjusts to the content inside the html/body containers.

Hopefully I understood your question.

share|improve this answer

this one will work, even if the content exceeds the div.

setting min-height: 100% instead of fixing height:100% ensures a flexible div.

share|improve this answer

Your Answer


