Many people find that even if they set ‘height: 100%’ to a DIV, it will not expand all the way to the bottom of the browser window, but stop right after the content finishes within the DIV.

The solution is actually a very simple one.

For percentages to work properly, the elements parent has to have a defined height. For the DIV in question, the parent is BODY whose parent is HTML.

So, we have to specifically set the heights of these two elements in the CSS like so;

html, body { height: 100%; }

Now, when we set the DIV’’s height to 100% it’s parent will have a height defined, which will allow it to expand to the full height of the browser window.

Simple huh!