html 最高高度,html的height:100%;高度是多少

html的height:100%;高度是多少

html设置height:100%;表示一屏高度，类似于100vh。未设置则根据子元素的高度来自适应高。在实际应用中，设置页面高度为1屏幕高度通常设置：

html,body{

height:100%;

margin:0;

padding:0;

}

可以通过案例设置来查看html的实际高度。通过案例中改变窗口的高度大小，可以发现html的高度也是在变换的。

html设置高度100%

html,

body {

height: 100%;

background-color: pink;

margin: 0;

padding: 0;

}

#wrap {

width: 50%;

height: 50%;

background-color: purple;

}

/* 获取html元素的高度

*每次发生窗口大小改变，就获取html的高度。可以发现html的高度随着窗口可用区的高度增大而增大，减小而减小。

*/

window.onload = function () {

window.onresize = function () {

var oHtml = document.getElementsByTagName('html')[0];

var Htmlheight = oHtml.offsetHeight;

console.log(Htmlheight);

}

}

思考：设置整个页面的高度为一窗口可用区的一屏幕高度时，为什么还要设置body的高度为100%?

因为body如果为默认设置，它的高度值为auto，会根据子元素的高度来支撑高度。倘若子元素的高度设置为依赖父元素(body)的高度来支持的百分比数值，那么就形成了悖论。最后浏览器找不到计算高度的情况下，body的高度实际被设置为0。