寬度：100% 和寬度：100vw 之間的區別？

Question

我必須適應屏幕高度的 iframe。 顯然，我想要 100% 的寬度，但由於這不起作用，我使用了 100vh。 但是像 vw 一樣的 vh 並不完全是 100%。 在我的筆記本電腦中通過 chrome 雖然 100% 寬度完美呈現而無需水平滾動條，vw 有大約一厘米的額外。

Answer 1

vw 和 vh 分別代表視口寬度和視口高度。

使用width: 100vw而不是width: 100%的區別在於，雖然100%將使元素適合所有可用空間，但視口寬度有一個特定的度量，在這種情況下可用屏幕的寬度，包括文檔邊距.

如果您設置樣式body { margin: 0 } ，則 100vw 的行為應與 100% 相同。

補充筆記

使用vw作為網站中所有內容的單位，包括字體大小和高度，將使網站始終與設備的屏幕寬度成比例地顯示，無論其分辨率如何。 這使得確保您的網站在工作站和移動設備中正確顯示變得非常容易。

您可以在body CSS 中設置font-size: 1vw （或任何適合您項目的大小），並且以rem單位指定的所有內容都將根據設備屏幕自動縮放，因此可以輕松移植現有項目甚至框架（例如 Bootstrap）到這個概念。

Answer 2

Havenard 的回答似乎並不完全正確。 我發現 vw 填充了視口寬度，但沒有考慮滾動條。 因此，如果您的內容比視口高（因此您的網站有一個垂直滾動條），那么使用 vw 會產生一個小的水平滾動條。 我不得不將width: 100vw切換為width: 100%以擺脫水平滾動條。

Answer 3

您可以通過添加max-width來解決此問題：

#element {
   width: 100vw;
   height: 100vw;
   max-width: 100%;
}

當您使用 CSS 使包裝器全寬時，使用代碼width: 100vw; 然后你會注意到頁面中的水平滾動，這是因為html和body標簽的padding和margin添加到包裝器大小，所以解決方案是添加max-width: 100%

Answer 4

@Havenard 的回答為這個問題提供了完美的解釋。 除此之外，這提供了差異的視覺表示。

當您有一個帶有滾動條的站點和一個應該適合整個屏幕寬度的元素時，您將能夠注意到100vw和100%之間的主要區別。

選項1

下面是一個相同的例子。
我在下面的代碼中所做的就是將鼠標懸停在<h1>標簽上時，將其寬度從100vw為100% 。

 body{ /* margin: 0; */ } .scroll{ height: calc(110vh); } h1{ width: 100vw; /* width: 100%;*/ text-align:right; outline: 5px solid black } h1:hover{ width: 100%; } h1:before{ content: "100vw " } h1:hover:before{ content: "100% " }

 <div class = "scroll"> <h1>Width</h1> </div>

如果您運行上面的代碼片段並懸停文本，您會注意到兩件事：

1. 水平滾動條消失
2. 您可以看到整個文本

注意：運行上面的代碼片段后，您可以在瀏覽器開發工具中使用上面的代碼來查看它如何影響元素

---

選項 2（ Chrome 和 Edge ）

 .scroll{ height: calc(110vh); display: flex; align-items: baseline; } h1{ width: 100vw; /* width: 100%; */ text-align:right; outline: 10px solid black }

 <div class="scroll"> <h1>Test</h1> </div>

另一種直觀地查看您自己項目中的差異的方法是將display:flex樣式設置為具有 100vw 的元素。

當您在瀏覽器 devtools 中突出顯示此元素時，您會注意到元素右端有一個向左的箭頭。 您還可以看到突出顯示元素的陰影跨越滾動條，表明它正在考慮整個屏幕寬度（包括滾動條寬度）

---

解決類似問題的其他問題是：

1. 100vw 導致水平溢出，但前提是不止一個？
2. CSS 單位 - vh/vw 和 % 之間有什么區別？
3. 防止 100vw 創建水平滾動