通常我們需要讓自己的網頁內容能夠更好的適配各種屏幕大小，會采用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{
width: 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>