html的height:100%;高度是多少
html設置height:100%;表示一屏高度，類似於100vh。未設置則根據子元素的高度來自適應高。在實際應用中，設置頁面高度為1屏幕高度通常設置：
html,body{
height:100%;
margin:0;
padding:0;
}
可以通過案例設置來查看html的實際高度。通過案例中改變窗口的高度大小，可以發現html的高度也是在變換的。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>html設置高度100%</title>
<style>
html,
body {
height: 100%;
background-color: pink;
margin: 0;
padding: 0;
}
#wrap {
width: 50%;
height: 50%;
background-color: purple;
}
</style>
<script>
/* 獲取html元素的高度
*每次發生窗口大小改變，就獲取html的高度。可以發現html的高度隨着窗口可用區的高度增大而增大，減小而減小。
*/
window.onload = function () {
window.onresize = function () {
var oHtml = document.getElementsByTagName('html')[0];
var Htmlheight = oHtml.offsetHeight;
console.log(Htmlheight);
}
}
</script>
</head>
<body>
<div id='wrap'>
</div>
</body>
</html>
思考：設置整個頁面的高度為一窗口可用區的一屏幕高度時，為什么還要設置body的高度為100%?
因為body如果為默認設置，它的高度值為auto，會根據子元素的高度來支撐高度。倘若子元素的高度設置為依賴父元素(body)的高度來支持的百分比數值，那么就形成了悖論。最后瀏覽器找不到計算高度的情況下，body的高度實際被設置為0。