CSS 寬度單位：100vw vs 100%

在處理網頁佈局時，經常會使用不同的 CSS 單位來設定元素的寬度。

兩個常見的選項是 100vw 和 100%，它們看似相似，但在特定情況下會有重要的差異。

問題情境

開發過程中遇到了這樣的問題：

當 navbar 使用 width: 100vw 時，在頁面內容（如新增多個投票選項）導致頁面變長需要垂直捲軸時，畫面上會出現水平捲軸。但是當改用 width: 100% 時，水平捲軸就消失了。

原因分析

這個問題的核心原因是 vw 和 % 這兩種單位的計算方式不同。

100vw (Viewport Width)

vw 是相對於視口寬度的單位，其中 100vw 等於視口的完整寬度。

重要的是：vw 單位不考慮垂直捲軸的存在。

所以即使頁面因為內容過多而出現了垂直捲軸，100vw 仍然會是整個視口的原始寬度。

100% (百分比)

% 是相對於父元素的單位，100% 等於父元素的完整寬度。

當父元素的寬度已經考慮了垂直捲軸的存在時，100% 就會自動適應。

視覺化說明

沒有垂直捲軸時：
|----------------------------------------| 1000px (100vw)
|                navbar                  |
|                                        |
|                content                 |
|                                        |
|----------------------------------------|

有垂直捲軸時：
|--------------------------------------|[] 1000px (100vw)
|              navbar (100vw)          |[] <- 垂直捲軸
|                                      |[]
|              content                 |[]
|                                      |[]
|--------------------------------------|[]
|<---------- 983px (100%) ------------>|[]

如上圖所示：

• 當頁面沒有垂直捲軸時，100vw 和 100% 通常是相同的

• 當頁面出現垂直捲軸時（通常寬度約 17px），視口的可用寬度被擠壓

  • 使用 100vw 的元素仍然保持原始視口寬度，導致水平溢出

  • 使用 100% 的元素會適應被擠壓後的寬度，不會導致水平溢出

最佳實踐

基於以上分析，一些建議：

1. 對於全寬的頁面元素（如 navbar、header、footer 等），優先使用 width: 100% 而非 width: 100vw

2. 如果需要確保絕對沒有水平捲軸，可以在全局 CSS 中添加：

   html, body {
     overflow-x: hidden;
     width: 100%;
   }

3. 如果特定情況確實需要使用 vw 單位，記得考慮垂直捲軸可能帶來的影響！！！

結論

在設計響應式佈局時，了解不同 CSS 單位的行為至關重要。使用 100% 而非 100vw 可以避免因垂直捲軸出現而導致的水平溢出問題。