How can I resize a DIV's height to 100%?

Question

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.

Answer 1

my answer is here..

http://jsfiddle.net/tcaVN/101/

edit:

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

http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

Answer 2

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.

Answer 3

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

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