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

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

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

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

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

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

BeyondWords

2015-04-30

源自：炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫基礎(chǔ) 5-2

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

1525

操作

收起

3 回答

哦哦噠
2015-08-21

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

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

收起回答

arlenhui
2015-06-28

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

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

收起回答

#1

哦哦噠

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

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

#2

arlenhui 回復(fù) 哦哦噠

高度會(huì)大是因?yàn)槭裁茨?？另外overflow-x是清除水平軸的滾動(dòng)條，所以你所謂底部小球顯示部分的說法是錯(cuò)誤的。

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

#3

哦哦噠回復(fù) arlenhui

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

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