要搞清楚這個問題首先要知道這兩個單位（vw、vh）是什么意思。vw（vh）是相對于瀏覽器的視口寬度（高度）的，100vh等于瀏覽器的視口寬度，設(shè)置vw和vh會在視口發(fā)生變化時重新計(jì)算寬度和高度。
那么問題來了，什么是瀏覽器的視口，來看下面一張圖：
上面這張圖中，紅色線條框起來的區(qū)域才是瀏覽器的視口，不是整個瀏覽器可視區(qū)域，也不是這個綠色背景覆蓋的區(qū)域。
知道這些以后，我們給一個盒子設(shè)置100vw和100vh應(yīng)該是讓這個盒子剛好覆蓋瀏覽器視口。那么為什么會出現(xiàn)橫向和縱向的滾動條呢？
上面這張圖的代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100vw;
height: 100vh;
background: green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在代碼中，我們給body中的一個class為box的盒子設(shè)置了寬度100vw，高度100vh，背景顏色green。我們會注意到，這個綠色背景與視口頂端和左端都有一定白色間隙。這個間隙是由于瀏覽器給body增加默認(rèn)樣式造成的，我們可以通過開發(fā)者工具面板看到這些瀏覽器樣式，如下圖：
可見瀏覽器給body設(shè)置了一個8px的外邊距。
由于這個外邊距的存在，而我們的盒子的高度是整個視口的高度，所以body的寬高會被綠色盒子撐開，從而導(dǎo)致視口無法完整顯示body元素。
對于瀏覽器來說，有任何一個元素?zé)o法在視口內(nèi)顯示，瀏覽器就會自動加滾動條，這種滾動條（區(qū)別于由于設(shè)置了overflow:scroll出現(xiàn)的滾動條)永遠(yuǎn)出現(xiàn)在緊貼著視口的右側(cè)或下側(cè)，同時這種滾動條也是視口的一部分。
所以一開始視口無論橫向和縱向都無法完整顯示body元素，導(dǎo)致了出現(xiàn)了橫向和縱向滾動條。
在不改變這個綠色盒子已有的這兩個屬性的情況下消除滾動條有如下方式，
- 第一種解決方案是將body的上下左右外邊距都設(shè)置為0。（注意如果有body有任何一個方向的外邊距不為0，都會可能導(dǎo)致橫向和縱向都出現(xiàn)滾動條，這是因?yàn)闄M向的滾動條的出現(xiàn)會使視口的高度變高，縱向滾動條的出現(xiàn)使得視口寬度變寬。）
- 第二種解決方案是給綠色盒子設(shè)置max-width:100%使得橫向滾動條消失。
- 第三種解決方案是給body元素設(shè)置溢出隱藏（overflow:hidden)
- 第四種解決方案是給html元素設(shè)置溢出隱藏overflow:hidden)
第三和第四種方案會導(dǎo)致一部分內(nèi)容無法顯示，隨著可視區(qū)域變化，被隱藏的部分也會變化。
關(guān)于overflow補(bǔ)充一下細(xì)節(jié)：overflow是一個速寫屬性，包含overflow-x，overflow-y，所有元素的overflow值默認(rèn)都是visible(可見）。其值可以取得scroll（出現(xiàn)滾動條）、hidden（隱藏溢出的部分）。在視口能正常顯示所有元素的情況下，給body或html元素設(shè)置overflow:scroll會出現(xiàn)無法滑動的橫向和縱向滾動條。
?文章來源：http://www.zghlxwxcb.cn/news/detail-824905.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-824905.html
到了這里，關(guān)于css 100vw、100vh出現(xiàn)滾動條怎么解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
