通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用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: 0; padding: 0; } html, body{ height: 100%; } .sys_content{ 100%; height: 100%; /* 不设置html,body{height: 100%} 是,该height为0 */ background-color: #c1cdcd; } </style> <body> <div class="sys_content"> <div id="canvas"></div> </div> </body> </html>