About html, body {height: 100%} understanding

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/suandfei/article/details/102766624

Sometimes you see someone else write css code will find the time: html, body {height: 100 %}
First we look at the definition for the height of the w3c:
Here Insert Picture Description
First, this height: may be a percentage that is equivalent to the height of the containing block, if is a div not set the width and height of it is undeniable that, div will inherit 100% of the width of the parent element, but not the height. If the content div inside text is distracting height. we now consider that there is no div text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
        div{
            height: 100%;
            background-color: #ff0;
        }
     
     </style>
</head>
<body>
     <div> </div>
</body>
</html>

Set the height to the div height: 100% result page will not show ... because height: 100% want to be included in the block containing block div here is body body height is not set so that when the height: 100% corresponds to completely no effect but if we add to the body. height: 100% of it?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
        div{
            height: 100%;
            background-color: #ff0;
        }
        body{
            height: 100%;
        }
     
     </style>
</head>
<body>
     <div>

     </div>
</body>
</html>

They can go to test you will find on the page or what not, you'll obviously want to block body contains a high degree, and why did not it because height:? 100% is not also a relatively high degree, and he is now relative to the browser the label is HTML height he is not a fixed value so height:. 100% simply inherit less than the height, but I html to add height: 100% will find div also have a high degree of .html: height: 100% is relative the height of the browser itself. this can be acquired in dom with window.innerHeight which is loaded automatically formed in the html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
        div{
            height: 100%;
            background-color: #ff0;
        }
        body,html{
            height: 100%;
        }
     
     </style>
</head>
<body>
     <div>
 </div>
</body>
</html>

The results are as follows:
Here Insert Picture Description
This time understand html, body {height: 100% } meaning the presence of at least one of the bar will not.

About html, body {height: 100%} understanding

Guess you like