                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /炫麗的倒計時效果Canvas繪圖與動畫基礎(chǔ)

使用document.body.clientHeight和document.documentElement.clientHeight 都沒有完全實現(xiàn)自適應(yīng)的問題

在做自適應(yīng)是時候，使用課程里的方法 document.body.clientHeight，高度其實沒有被撐開到100%

看到有回答說是用document.documentElement.clientWidth和 document.documentElement.clientHeight，我試了一下，比上面的效果好，但是水平和縱向都出現(xiàn)了滾動條

我用Firefox和chrome瀏覽器，都出現(xiàn)了這樣的問題。特別是縱向滾動條，導(dǎo)致小球與瀏覽器底部的碰撞反彈就看不到了。

不知道大家有沒有類似的問題，有木有解決方法~~

BeyondWords

2015-04-30

源自：炫麗的倒計時效果Canvas繪圖與動畫基礎(chǔ) 5-2

關(guān)注問題我要回答

1510

操作

收起

3 回答

哦哦噠
2015-08-21

清除margin和padding沒什么用，overflow應(yīng)該會讓底部的小球只能顯示部分，理解一下所謂的document.documentElement.clientHeight，無非是獲得了可見區(qū)域的高度，而產(chǎn)生滾動條的原因是獲得的高度有點大了，這樣就稍微給他減小點就是咯，我減了30就不會有滾動條了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

arlenhui
2015-06-28

清除margin和padding我試過沒用啊，我是用overflow-x:hidden解決的

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

哦哦噠

清除margin和padding沒什么用，overflow應(yīng)該會讓底部的小球只能顯示部分，理解一下所謂的document.documentElement.clientHeight，無非是獲得了可見區(qū)域的高度，而產(chǎn)生滾動條的原因是獲得的高度有點大了，這樣就稍微給他減小點就是咯，我減了30就不會有滾動條了

2015-08-21 回復(fù) 有任何疑惑可以回復(fù)我~

#2

arlenhui 回復(fù) 哦哦噠

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

2015-08-21 回復(fù) 有任何疑惑可以回復(fù)我~

#3

哦哦噠回復(fù) arlenhui

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

2015-08-22 回復(fù) 有任何疑惑可以回復(fù)我~