                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1529

操作

收起

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 回復哦哦噠

高度會大是因為什么呢？另外overflow-x是清除水平軸的滾動條，所以你所謂底部小球顯示部分的說法是錯誤的。

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

哦哦噠回復 arlenhui

恩，沒看到那個x，然后我測試了一下，document.documentElement.clientHeight得到的確實是可見區域的高度，但是在把html，body，canvas，的margin，padding清零之后，body元素依然會比canvas元素高3px，具體原因不清楚，至于橫向上是因為document.documentElement.clientWidth包含了滾動條的寬度，需要減掉

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