Why does height of body not match height of html?

2018-07-02 01:45:41

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?

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

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.

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>

链接地址: http://www.djcxy.com/p/89412.html

上一篇: 为什么我写的CSS规则不适用？

下一篇: 为什么身体的高度不符合html的高度？