css - vh單位 - vw rem




100vw導致水平溢出,但只有多於一個? (3)

說你有這個:

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>

您不僅可以獲得垂直滾動條(預期),還可以獲得輕微的水平滾動條。

我意識到你可以省略寬度,或者將其設置為寬度:100%,但我很好奇為什麼會發生這種情況。 是不是100vw應該是“100%的視口寬度”?


width: 98vw;

margin-left: 1vw;

為了抵​​消它,所以無論你是否有滾動,你都有正好在中間的元素而不重新計算它。


更新:從Chrome版本66開始,我無法重現問題報告的行為。 似乎不需要解決方法。

原始答案

這實際上是本回答和上述評論中報告的錯誤。

雖然接受的答案中的解決方法(添加.box {max-width: 100%;} )通常有效,但我發現值得注意的是它目前不適用於display:table (在Chrome中測試)。 在這種情況下,我發現的唯一解決方法是使用width:100%


滾動條將包含在vw因此將添加水平滾動以允許您在垂直滾動下查看。

當你只有一個盒子時,它是100%寬x 100%高。 一旦你添加2,它的100%寬x 200%高,因此觸發垂直滾動條。 當觸發垂直滾動條時,會觸發水平滾動條。

你可以添加overflow-x:hiddenbody

html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}

http://jsfiddle.net/NBzVV/





css