ansaurus

Question

Making DIV height at least as tall as the page in CSS

Answer 1

+1 A:

min-height:100%

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

Jimmeh 2010-03-02 13:46:13

same old, same old: "won't work in IE6"

peirix 2010-03-02 13:49:08

good, if more people ignored ie6, perhaps people would stop using it :)

Jimmeh 2010-03-02 13:50:24

This will work in some browsers, but the body and html elements are content height only unless otherwise specified in some common broswers.

NickLarsen 2010-03-02 13:50:31

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.

rFactor 2010-03-02 13:51:44

Try setting body, html { height:100%; } too, as per the answer below/above depending where it appears. :)

Jimmeh 2010-03-02 13:52:53

Answer 2

+1 A:

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

.yourDiv {
  top: 0
  bottom: 0

}

Robusto 2010-03-02 13:46:23

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.

NickLarsen 2010-03-02 13:48:55

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 2010-03-02 13:50:05

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).

rFactor 2010-03-02 13:54:02

Answer 3

+3 A:

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

body, html {
   height:100%
}

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

Diodeus 2010-03-02 13:50:51

Almost works. The DIV with min-height: 100%; works as expected, but how do I make DIVs inside it to height: 100%?

rFactor 2010-03-02 13:58:40

Please post a simple HTML example.

Diodeus 2010-03-02 14:35:17

Answer 4

+3 A:

IE6 fix to go along with Jimmeh's answer:

height: expression( this.scrollHeight < document.body.clientHeight ? "100%" : "auto" )

peirix 2010-03-02 13:52:05

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 2010-03-02 14:03:22

Answer 5

+3 A:

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

Tom 2010-03-02 13:57:51

ansaurus

tags:

views:

answers:

Making DIV height at least as tall as the page in CSS

related questions