The concept of eight:100% is that the child node is relative to the parent container; so for this attribute to take effect, it is necessary that the parent container must have specific height information;

Writing height:100% directly in the child nodes of <body> (such as div) will not take effect, because the height of <body> is uncertain at this time, and the default is auto;

method one

Set the percentage height information for all containers from the root parent container to the child container

for example:

<!DOCTYPE html>  
<html lang="zh-cn" style="height:100%;width:100%;overflow:hidden;">  
    <head>  
        <meta charset="utf-8" />  
        <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;chrome=1" />  
        <title>132</title>        
    </head>  
    <body style="height:100%;width:100%;padding:0;margin: 0;">  
  
        <div style="height:100%;width:100%;background-color:#787878" >  
             
        </div>  
    </body>  
</html>

In this way, from the root Html to the end of the div of the word, all have a percentage height, so that the height information can be obtained;

Method Two

Set specific height information for the parent container;

For example, write it directly in the style, or use javascript to set it;

Example, use js to make the <body> height so that the div in it is full screen:

<!DOCTYPE html>  
<html lang="zh-cn">  
    <head>  
        <meta charset="utf-8" />  
        <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;chrome=1" />  
        <title>132</title>        
    </head>  
    <body id="body" style="padding:0;margin: 0;">  
        <div style="height:100%;width:100%;background-color:#787878" >  
          
        </div>  
    </body>  
    <script type="text/javascript">  
        var screenHeight=document.documentElement.clientHeight;  
        var screenWidth=document.documentElement.clientWidth;  
        var body=document.getElementById('body');  
        body.style.width=screenWidth+"px";  
        body.style.height=screenHeight+"px";  
    </script>  
</html>

Method three

Set the position information for the parent container to get the height information;

Example, use css to make the body height so that the div inside it is fullscreen:

<!DOCTYPE html>  
<html lang="zh-cn">  
    <head>  
        <meta charset="utf-8" />  
        <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;chrome=1" />  
        <title>132</title>        
    </head>  
    <body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;padding:0;margin: 0;">  
        <div style="height:100%;width:100%;background-color:#787878" >  
             
        </div>  
    </body>  
</html>

The method for taking effect of the height percentage height: 100%

method one

Method Two

Method three

Guess you like