3

This is my code.

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body { min-height: 100%; }
    </style>
  </head>
  <body>
  </body>
</html>

Chrome, Firefox, and Safari inspectors all show the html element with height equal to the browser window as should be the case, but the body element with height 0. Setting the height (not just min-height) of the body element to 100% doesn't help. The body element should have height equal to 100% of its parent element, the html element, which has height equal to the window. So why doesn't it?

Steve
  • 31
  • 1
  • 2
  • Good question regarding min-height not working on the body element. Although adding `height:100%` actually does work, try it: http://jsfiddle.net/ND74j/. – Justin Jul 09 '14 at 03:15
  • Possible duplicate of [Make body have 100% of the browser height](http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) – Vinícius Fagundes Dec 02 '15 at 02:13

6 Answers6

4

Try restricting its height to always only be 100% using height and min-height, like so:

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

WORKING EXAMPLE

Another possible way is to give the parent (in this case, the html tag) a height of 100%, and then give the child (body tag) the min-height, like so:

html {
    height:100%;
}

body {
    min-height: 100%;
}

WORKING EXAMPLE

Here is a similar question to yours that can answer some more indepth questions - Make body have 100% of the browser height

Community
  • 1
  • 1
Fizzix
  • 23,679
  • 38
  • 110
  • 176
  • Any idea why `min-height` alone doesn't work for the body element? Also, if you use `height:100%` I don't think you need `min-height:100%`. – Justin Jul 09 '14 at 03:16
  • It seems to be a Webkit bug, unless they are intentionally doing it. I will keep looking around for a proper answer to your question. Although, as you can see from this fiddle, using `div`s works perfectly. So it is definitely a problem just with the `body` and `html` tags - http://jsfiddle.net/S3MxC/ – Fizzix Jul 09 '14 at 03:19
2

The reason this does not work is percentage based height vales require that the height be set on the parent element (except for the html node, which is based off the viewport). While the browser will always render the html node as the full browser, you actually need to set the height in CSS for the body to base the percentage off of. I believe what you are looking for is the following.

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

JSFiddle

This is a cleaner solution to setting both body and html to height: 100%; as the body will commonly be larger than 100% of the viewport.

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
0

I think it is working .Add bgcolor to your body element and see if it is 100%. I tried following code which is working -

<!DOCTYPE html>
<html>
<head>
<style>
html, body { min-height: 100%;}
</style>
</head>
<body bgcolor="#00CC33">
<div>HELLO</div>
</body>
</html>
The_ehT
  • 1,202
  • 17
  • 32
0

As to why min-height is not working, see: child inside parent with min-height 100% not inheriting height

Also note, using body,html { height: 100% } instead, works fine.

http://jsfiddle.net/ND74j/

Community
  • 1
  • 1
Justin
  • 26,443
  • 16
  • 111
  • 128
0

Restricting the height to always be the height of its parent element will work but you need to add a light CSS reset:

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

For a full CSS reset see normalize.css

cpuxtech
  • 9
  • 1
0

This is something I recently came across and was able to resolve with this:

body {
    display: inline-block;
    min-height: 100vh;
    width: 100%;
}


// this class is a div containing all your page's content

.body {
    width: 1400px; // arbitrary number
    margin: auto;
}
Zeina
  • 1,573
  • 2
  • 24
  • 34
user12134290
  • 1