Take the 2-minute tour ×

I have a DIV that I want to touch the bottom of the screen (for appearance reasons). Sometimes the content is enough tall to do that, but sometimes the content is too short and the DIV won't touch the bottom of the screen. Is there a simple workaround?

share|improve this question

5 Answers 5

up vote 16 down vote accepted

If you set min-height to 100% for the DIV, you also need to include:

body, html {

Elements expand to the size of their container, so make sure the container (being the page itself) has a height of 100% as well.

share|improve this answer
Almost works. The DIV with min-height: 100%; works as expected, but how do I make DIVs inside it to height: 100%? –  Tower Mar 2 '10 at 13:58
Please post a simple HTML example. –  Diodeus Mar 2 '10 at 14:35

This is way to do it: http://ryanfait.com/sticky-footer/

share|improve this answer

IE6 fix to go along with Jimmeh's answer:

height: expression( this.scrollHeight < document.body.clientHeight ? "100%" : "auto" )
share|improve this answer
I think that height: 100% is enough - IE6 will set auto height if not hidden overflow (or it decides that because of whatever obscure reason, height should be anything else) –  Adam Kiss Mar 2 '10 at 14:03


should work assuming it's not in another div with a height set,

share|improve this answer
same old, same old: "won't work in IE6" –  peirix Mar 2 '10 at 13:49
good, if more people ignored ie6, perhaps people would stop using it :) –  Jimmeh Mar 2 '10 at 13:50
This will work in some browsers, but the body and html elements are content height only unless otherwise specified in some common broswers. –  Nick Larsen Mar 2 '10 at 13:50
I can't get this to work? Are you sure it works? I tried Opera 10.50, Firefox 3.6, Chrome 4 and didn't work. –  Tower Mar 2 '10 at 13:51
Try setting body, html { height:100%; } too, as per the answer below/above depending where it appears. :) –  Jimmeh Mar 2 '10 at 13:52

If you set the div's CSS to position:absolute you can use:

.yourDiv {
  top: 0
  bottom: 0

share|improve this answer
This will only work if the div is not placed inside of another element with position set (not display). And if that is the case, the html and body elements must be set to have 100% height. –  Nick Larsen Mar 2 '10 at 13:48
True. I was assuming (perhaps wrongly) that this was going to be the main container div. Otherwise, why make it stretch top to bottom? –  Robusto Mar 2 '10 at 13:50
I don't stretch it from top to bottom, but from y to bottom where y is a position depending on the upper DIV elements (menu and header). –  Tower Mar 2 '10 at 13:54

Your Answer


