為什麼使用100vw會導致多個元素水平溢出？

理解100vw 導致的水平溢出

當使用100vw 定義元素的寬度時，當存在多個此類元素時，開發人員可能會遇到意外的水平溢出。雖然 100vw 旨在表示“視口寬度的 100%”，但某些情況可能會導致這種行為。

考慮以下程式碼：

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

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

此程式碼將產生一個填滿整個螢幕而沒有任何捲軸的元素。但是，如果添加第二個元素：

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

結果不僅是垂直滾動條（如預期），而且還有輕微的水平滾動。為什麼會出現這種情況？

原因在於垂直滾動條的存在。當 div 元素的內容超過其高度時，會出現垂直捲軸。這會減少元素的可用水平空間，導致它們水平溢出。

要解決此問題，可以添加max-width: 100%;到盒子類別：

.box {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
}

透過將元素的最大寬度限制為100%，即使存在垂直滾動條，也可以防止水平溢出。

以上是為什麼使用100vw會導致多個元素水平溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！