                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

使用document.body.clientHeight和document.documentElement.clientHeight 都没有完全实现自适应的问题

在做自适应是时候，使用课程里的方法 document.body.clientHeight，高度其实没有被撑开到100%

看到有回答说是用document.documentElement.clientWidth和 document.documentElement.clientHeight，我试了一下，比上面的效果好，但是水平和纵向都出现了滚动条

我用Firefox和chrome浏览器，都出现了这样的问题。特别是纵向滚动条，导致小球与浏览器底部的碰撞反弹就看不到了。

不知道大家有没有类似的问题，有木有解决方法~~

BeyondWords

2015-04-30

源自：炫丽的倒计时效果Canvas绘图与动画基础 5-2

关注问题我要回答

1402

操作

收起

3 回答

哦哦哒
2015-08-21

清除margin和padding没什么用，overflow应该会让底部的小球只能显示部分，理解一下所谓的document.documentElement.clientHeight，无非是获得了可见区域的高度，而产生滚动条的原因是获得的高度有点大了，这样就稍微给他减小点就是咯，我减了30就不会有滚动条了

0 回复有任何疑惑可以回复我~

收起回答

arlenhui
2015-06-28

清除margin和padding我试过没用啊，我是用overflow-x:hidden解决的

0 回复有任何疑惑可以回复我~

收起回答

哦哦哒

2015-08-21 回复有任何疑惑可以回复我~

哦哦哒回复 arlenhui

恩，没看到那个x，然后我测试了一下，document.documentElement.clientHeight得到的确实是可见区域的高度，但是在把html，body，canvas，的margin，padding清零之后，body元素依然会比canvas元素高3px，具体原因不清楚，至于横向上是因为document.documentElement.clientWidth包含了滚动条的宽度，需要减掉

2015-08-22 回复有任何疑惑可以回复我~

arlenhui 回复哦哦哒

测试了一下，似乎...设置canvas的dispaly为block就可以解决3px的问题了，具体原因未知，你可以试一下img这种填充型的行级标签，我就不测试啦

2015-08-22 回复有任何疑惑可以回复我~

查看1条回复