100vw 導致意外的水平溢出
當為元素分配100vw 的寬度時，您可能希望它佔據整個視口寬度，而不需要導致任何溢出。但是，在某些情況下，儘管使用 100vw，仍可能會出現水平捲軸。
請考慮以下範例：
html, body {
margin: 0;
padding: 0;
}
.box {
width: 100vw;
height: 100vh;
}
<div class="box">Screen 1</div>在這種情況下，.box 元素將填滿螢幕，而沒有任何捲軸。但是，如果您在第一個.box 元素下方添加第二個.box 元素：
<div class="box">Screen 1</div> <div class="box">Screen 2</div>
您不僅會觀察到垂直滾動條（預期）的外觀，還會觀察到輕微的水平滾動條。
造成此行為的原因在於瀏覽器解釋 100vw 的方式。雖然它確實意味著“視口寬度的 100%”，但它表示在考慮任何滾動條厚度後剩餘的視口可見部分。在這種情況下，垂直滾動條的存在會減少可用視窗寬度，這可能會導致第二個 .box 元素水平溢出。
要解決此問題，您可以在.box 元素：
.box {
width: 100vw;
height: 100vh;
max-width: 100%;
}這將確保元素永遠不會超過真實視口寬度，有效防止任何潛在的水平溢出。
以上是為什麼`100vw`有時會導致意外的水平溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
