document.body.clientHeight和document.documentElement.clientHeight出現(xiàn)縱向，縱向橫向滾動條問題
1 按照慕課網(wǎng)上老師說的 在用document.body.clientHeight獲取屏幕高度的同時，在html結構中將body和canvas的高度都設成了height:100%;
js:
var WINDOW_WIDTH=document.body.clientWidth;
var WINDOW_HEIGHT=document.body.clientHeight;
html:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>倒計時</title>
<style>
*{margin:0;padding:0;list-style:none;border:0}
</style>
<script src="digit.js"></script>
<script src="countDown.js"></script>
</head>
<body style="height:100%">
<canvas id="canvas" style="height:100%">
</canvas>
</body>
</html>
效果如下：
撐不開，之后將html標簽加上style="height：100%;"撐開了但是出現(xiàn)了縱向滾動條
明明已經將所有的樣式的margin padding都清空了。為什么還會出現(xiàn)縱向滾動條？
不知道為什么，但是在html上添加了overflow：hidden;倒是把縱向滾動條給去掉了。
2 看到有人說用document.documentElement.clientHeight；
說：body是DOM對象里的body子節(jié)點，即 <body> 標簽；?documentElement 是整個節(jié)點樹的根節(jié)點root，即<html> 標簽；?
于是用了下：
WINDOW_HEIGHT=document.documentElement.clientHeight;
html代碼：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>倒計時</title>
<style>
*{margin:0;padding:0;list-style:none;}
</style>
<script src="digit.js"></script>
<script src="countDown.js"></script>
</head>
<body style="height:100%">
<canvas id="canvas" style="height:100%">
</canvas>
</body>
</html>
這樣的結果是出現(xiàn)橫向縱向雙滾動條
當在html中給html加上height:100%;橫向滾動條消失，但是縱向還在。原因不明。
去除橫向縱向，可在html中直接設置overflow:hidden;不必在設置height:100%.
也可以overflow-x:hidden；去掉橫向，overflow-y:hidden;去除縱向。
有知道為什么用他們獲取高度會出現(xiàn)滾動條的同學請告知一下。哪里多出了像素？
2016-12-27
<!DOCTYPE html style="height:100%;">?
<style type="text/css">
? ? *{
? ? margin:0px;
? ? padding:0px;
? ? }
? ? </style>
2016-11-24
canvas_width=document.body.clientWidth;
canvas_height=document.body.clientHeight;
canvas.width=canvas_width;
canvas.height=canvas_height;
寫成這樣 html里面在加上 style="height：100%"
2016-07-25
WINDOW_HEIGHT=document.documentElement.clientHeight-20;
WINDOW_WIDTH=document.documentElement.clientWidth-20;