CODEWITHSUNDEEP
htmlcss
Steve
Steve

Reputation: 31

Why does height of body not match height of html?

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?

Upvotes: 3

Views: 4823

Answers (6)

user12134290
user12134290

Reputation: 1

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;
}

Upvotes: 0

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60527

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.

Upvotes: 2

Fizzix
Fizzix

Reputation: 24375

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

Upvotes: 4

Justin
Justin

Reputation: 27301

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/

Upvotes: 0

cpuxtech
cpuxtech

Reputation: 9

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

Upvotes: 0

The_ehT
The_ehT

Reputation: 1230

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>

Upvotes: 0

Related Questions