当你让一个元素的高度设定为百分比高度时，是相对于父元素的高度根据百分比来计算高度。当没有给父元素设置高度（height）时或设置的高度值百分比不生效时，浏览器会根据其子元素来确定父元素的高度，所以当无法根据获取父元素的高度，也就无法计算自己高度。 换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果，也就是一个null值，浏览器不会对这个值有任何的反应。

html 的父元素可以理解成window，浏览器会将html填充填充完一个浏览器窗口。 设置html的height为具体的像素值，当其值大于浏览器窗口时，浏览器出现滚动条，当其值小于浏览器窗口时，同样会将html填充完整个浏览器窗口（可以设置背景测试）。设置html的height为百分比时，当其值大于100%出现滚动条，当小于100%时同样会将html填充完整个浏览器窗口（可以设置背景测试）。 但是子html的子元素的高度设置成百分比时，会按照html设置的高度值计算比例。

对于body的设置的高度小于浏览器窗口时，同样会填充满整个浏览器窗口（可以设置背景测试），但是其子元素的高度设置成百分比时，会按照body设置的高度值来计算比例。

 

      
     
       html的高度设置成小于浏览器窗口高度，但是仍然填充满整个浏览器窗口，但是其子元素的高度设置成百分比时，会按照父元素设置的高度值来计算比例。  
     

      
     
       body的高度设置成小于浏览器窗口高度，但是仍然填充满整个浏览器窗口，但是其子元素的高度设置成百分比时，会按照父元素设置的高度值来计算比例。  
     

 

 

      
     
       html的高度设置成大于浏览器窗口高度，会出现滚动条。  
     

 

      
     
         由于html没有设置高度，在body上面设置height:50%，未达到预期效果  
     

 

      
     
         由于html没有设置高度，在body上面设置height:50%，未达到预期效果