97

While designing layouts I set the html, body elements' height to 100% but in some cases, this fails, so what should be used?

html, body {
   height: 100%;
}

or 

html, body {
   min-height: 100%;
}

Well, this is not opinion based as each method has its own flaws, so what's the recommended way to go for and why?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278

2 Answers2

217

If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):

Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.

The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.

The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.

For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 4
    This is what I liked this most :) `height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content` easy peasy solution... thanks // – Mr. Alien Jul 09 '13 at 18:47
  • I wonder though, how does the scroll bars magically appear then? The `html` element has `overflow:visible` by default, so I assume the scroll bars appear due to browser behavior to allow the whole normal flow of the document to be displayed. – Fabrício Matté Jul 09 '13 at 19:15
  • @Fabrício Matté: It translates to `overflow: auto` on the viewport, which is where the scrollbars come from. That's covered in section 11: http://www.w3.org/TR/CSS21/visufx.html – BoltClock Jul 09 '13 at 19:16
  • Wow quick reply, thanks for the direct link to spec as well. `=]` – Fabrício Matté Jul 09 '13 at 19:17
  • 10
    @BoltClock Any idea how to get the child 100% of the body [here](http://jsfiddle.net/ZpDLw/)? [this](http://jsfiddle.net/ZpDLw/1/) works though – Mr. Alien Jul 11 '13 at 17:49
  • @Mr.Alien: Did you find any solution? I despair here :/ – Julian F. Weinert Dec 19 '13 at 12:00
  • @Julian He had edited his answer after I had commented, you will get the answer in there, use `background` on `html` and not on any container element – Mr. Alien Dec 19 '13 at 12:25
  • Thanks, @Mr.Alien, but the background should shrink horizontally with the window in a specified range. Sometimes I hate designers... :) Thanks, though – Julian F. Weinert Dec 19 '13 at 12:51
  • This is the only solution that worked for me, despite there being lots of other answers to similar questions on here. – Nate Apr 30 '15 at 15:38
  • By the way..maybe do not forget to put the `box-sizing:border-box;` on all html to elements, to avoid issues with margins and paddings here and there :) – Erenor Paz May 20 '17 at 14:12
  • 1
    box-sizing: border-box doesn't affect margins. Padding, yeah, but that's down to personal preference. – BoltClock May 20 '17 at 14:16
23

You can use viewport height (vh) unit:

body {
    min-height: 100vh;
}

It is relative to screen, not to parent height, so you don't need html height: 100%.

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
  • What extra advantages does this offer though. – xji Sep 27 '18 at 16:56
  • No extra advantages, just another way to solve the problem. – Damjan Pavlica Sep 28 '18 at 08:16
  • 4
    beware of how mobile understands this – GWorking Apr 08 '20 at 07:26
  • 1
    Just be aware that no all browsers support this units... Do check browser compatibility first: https://caniuse.com/#feat=viewport-units – dBlaze May 18 '20 at 06:21
  • 2
    A warning: viewport-relative units don't take into account scroll bar dimensions. You may end up with an extra few pixels of white space at the bottom of your content, if the page width is overflowing. – Jamie Jul 20 '21 at 11:57