解决html设置height:100%无效的问题

时间:2023-03-08 16:38:26
解决html设置height:100%无效的问题

通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单

解决:你只需要在css处添加上html, body{ margin:0; height:100%; }即可。
原因:你让div的height="100%",执行网页时,css先执行到,而整个网页中的内容还没有完全载入,是获取不到div外面的<body>等的高度的,所以height="100%"也就不能如愿显示了。加上 body{height:100%} 就轻松解决啦,一开始就让body以100%显示,他的下级div自然就100%的,对于部分浏览器还需html,body{height:100%}
总结: 最好添加上 html,body{height:100%}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<style type="text/css">
*{
margin: ;
padding: ;
}
html, body{
height: %;
}
.sys_content{
width: %;
height: %; /* 不设置html,body{height: 100%} 是,该height为0 */
background-color: #c1cdcd;
}
</style> <body>
<div class="sys_content">
<div id="canvas"></div>
</div> </body>
</html>

示例说明