document.body.clientHeight和document.documentElement.clientHeight出现纵向，纵向横向滚动条问题
微尘之弈
2016-07-20 11:46
1 按照慕课网上老师说的 在用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%;"撑开了但是出现了纵向滚动条
明明已经将所有的样式的margin padding都清空了。为什么还会出现纵向滚动条？
不知道为什么，但是在html上添加了overflow：hidden;倒是把纵向滚动条给去掉了。
2 看到有人说用document.documentElement.clientHeight；
说：body是DOM对象里的body子节点，即 <body> 标签； documentElement 是整个节点树的根节点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>
这样的结果是出现横向纵向双滚动条
当在html中给html加上height:100%;横向滚动条消失，但是纵向还在。原因不明。
去除横向纵向，可在html中直接设置overflow:hidden;不必在设置height:100%.
也可以overflow-x:hidden；去掉横向，overflow-y:hidden;去除纵向。
有知道为什么用他们获取高度会出现滚动条的同学请告知一下。哪里多出了像素？
3回答
-
- je_suis_idiot
- 2016-12-27 15:33:24
<!DOCTYPE html style="height:100%;">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style>
-
- 人生如梦丶
- 2016-11-24 14:32:22
canvas_width=document.body.clientWidth;
canvas_height=document.body.clientHeight;
canvas.width=canvas_width;
canvas.height=canvas_height;
写成这样 html里面在加上 style="height：100%"
-
- GreatDan
- 2016-07-25 15:59:25
WINDOW_HEIGHT=document.documentElement.clientHeight-20;
WINDOW_WIDTH=document.documentElement.clientWidth-20;
炫丽的倒计时效果Canvas绘图与动画基础
96746 学习 · 1000 问题
相似问题