為什麼多個 100vw 寬度的元素會建立水平捲軸？

100vw 水平溢出之謎

在 Web 開發領域，100vw 單位通常用於設定元素佔用的寬度全視口寬度。然而，當連續放置多個寬度為 100vw 的元素時，會出現一個奇怪的問題。垂直滾動條沒有如預期填滿螢幕，而是伴隨著莫名其妙的水平滾動出現。

要理解這種現象，讓我們深入研究 CSS 程式碼：

html, body {
  margin: 0;
  padding: 0;
}
.box {
  width: 100vw;
  height: 100vh;
}

<div class="box">Screen 1</div>

對於單一元素， div 填滿整個螢幕寬度，無需任何滾動。然而，增加另一個具有相同類別的 div 會導致上述滾動問題：

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

這種行為背後的罪魁禍首在於 100vw 的本質。雖然它確實代表了 100% 的視口寬度，但它是一個隨著視口大小的變化而波動的流體單位。例如，如果使用者將瀏覽器視窗調整得更窄，div 也會相應縮小，保持其 100vw 寬度。

使用 100vw 的多個 div，當視窗足夠寬時，有足夠的空間讓它們適應側面-並排。但是，當視窗縮小到一定寬度以下時，div 就無法進一步縮小。相反，它們開始重疊，從而產生水平溢出。

垂直捲軸是由於重疊而出現的。瀏覽器引入了滾動條，允許用戶水平滾動並存取隱藏在重疊 div 下的內容。

要解決此問題，可以在div 上使用max-width 屬性，將其最大寬度限制為100 %:

.box {
  max-width: 100%;
}

這樣做，只要有足夠的空間，div 仍然會佔據整個視窗寬度。然而，當視窗變窄且 div 無法並排放置時，它們會收縮並垂直堆疊，從而消除水平溢出和水平滾動的需要。

以上是為什麼多個 100vw 寬度的元素會建立水平捲軸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！