我必須在屏幕高度上安裝iframe。很明顯，我想要100%的寬度，但是，因?yàn)檫@樣不行，我用了100vh。 但是vh像vw也不完全是100%。 在我的筆記本電腦上，雖然100%的寬度不需要水平滾動(dòng)條就能完美呈現(xiàn)，但大眾有大約一厘米的額外空間。

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

使用width: 100vw而不是width: 100%的區(qū)別在于，雖然100%將使元素適合所有可用的空間，但是視窗寬度有一個(gè)特定的度量，在本例中是可用屏幕的寬度，包括文檔邊距。

如果設(shè)置了樣式body { margin: 0 }，100vw的行為應(yīng)該與100%相同(對(duì)于body的子元素)。

附加注釋 使用vw作為你網(wǎng)站中所有內(nèi)容的單位，包括字體大小和高度，將使網(wǎng)站總是與設(shè)備的屏幕寬度成比例顯示，而不管它的分辨率如何。這使得確保您的網(wǎng)站在工作站和移動(dòng)設(shè)備上顯示完全相同變得非常容易。

您可以在body CSS中設(shè)置font-size: 1vw(或任何適合您的項(xiàng)目的大小),以rem單位指定的所有內(nèi)容都將根據(jù)設(shè)備屏幕自動(dòng)縮放，因此很容易將現(xiàn)有項(xiàng)目甚至框架(例如已經(jīng)使用rem作為所有內(nèi)容單位的Bootstrap)移植到這個(gè)概念。

Havenard的答案似乎并不完全正確。我發(fā)現(xiàn)vw填充了視口寬度，但是沒有考慮滾動(dòng)條。因此，如果你的內(nèi)容比視窗高(這樣你的站點(diǎn)就有一個(gè)垂直滾動(dòng)條)，那么使用vw會(huì)產(chǎn)生一個(gè)小的水平滾動(dòng)條。我不得不將寬度從100%切換到100%來去掉水平滾動(dòng)條。

您可以通過添加最大寬度來解決這個(gè)問題:

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

當(dāng)你使用CSS代碼寬度:100vw制作包裝器的全幅時(shí)；然后，您會(huì)注意到頁面中出現(xiàn)了水平滾動(dòng)，這是因?yàn)閔tml和body標(biāo)簽的填充和邊距增加了包裝器的大小，所以解決方案是增加max-width: 100%

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

當(dāng)你有一個(gè)帶有滾動(dòng)條的站點(diǎn)和一個(gè)應(yīng)該適合整個(gè)屏幕寬度的元素時(shí)，你會(huì)注意到100vw和100%之間的主要區(qū)別。

選項(xiàng)1 下面是一個(gè)相同的例子。 我在下面的代碼中所做的只是改變& lth1 & gt當(dāng)你懸停在它上面時(shí)，標(biāo)記從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 {
float: left;
  content: "100vw "
}

h1:hover:before {
  content: "100% "
}

<div class="scroll">
  <p>Hover over the below block</p>
  <h1>Width</h1>
</div>

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 {
float: left;
  content: "100vw "
}

h1:hover:before {
  content: "100% "
}

<div class="scroll">
  <p>Hover over the below block</p>
  <h1>Width</h1>
</div>