当你让一个元素的高度设定为百分比高度时，是相对于父元素的高度根据百分比来计算高度。当没有给父元素设置高度（height）时或设置的高度值百分比不生效时，浏览器会根据其子元素来确定父元素的高度，所以当无法根据获取父元素的高度，也就无法计算自己高度。 换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果，也就是一个null值，浏览器不会对这个值有任何的反应。
html 的父元素可以理解成window，浏览器会将html填充填充完一个浏览器窗口。 设置html的height为具体的像素值，当其值大于浏览器窗口时，浏览器出现滚动条，当其值小于浏览器窗口时，同样会将html填充完整个浏览器窗口（可以设置背景测试）。设置html的height为百分比时，当其值大于100%出现滚动条，当小于100%时同样会将html填充完整个浏览器窗口（可以设置背景测试）。 但是子html的子元素的高度设置成百分比时，会按照html设置的高度值计算比例。
对于body的设置的高度小于浏览器窗口时，同样会填充满整个浏览器窗口（可以设置背景测试），但是其子元素的高度设置成百分比时，会按照body设置的高度值来计算比例。
<!doctype html> <html style="height:50%; background-color:#9F0"> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body style="height:100%; "> <div style="height:100%; background-color:#FFF" > html的高度设置成小于浏览器窗口高度，但是仍然填充满整个浏览器窗口，但是其子元素的高度设置成百分比时，会按照父元素设置的高度值来计算比例。 </div> </body> </html>
<!doctype html> <html style="height:50%; "> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body style="height:100%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > body的高度设置成小于浏览器窗口高度，但是仍然填充满整个浏览器窗口，但是其子元素的高度设置成百分比时，会按照父元素设置的高度值来计算比例。 </div> </body> </html>
<!doctype html> <html style="height:150%; "> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body style="height:100%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > html的高度设置成大于浏览器窗口高度，会出现滚动条。 </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body style="height:50%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > 由于html没有设置高度，在body上面设置height:50%，未达到预期效果 </div> </body> </html>
<!doctype html> <html style=" height:100%"> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body style="height:50%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > 由于html没有设置高度，在body上面设置height:50%，未达到预期效果 </div> </body> </html>
时间： 2024-11-10 21:17:00