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>