`100vw` が予期しない水平オーバーフローを引き起こすことがあるのはなぜですか?

100vw により予期しない水平オーバーフローが発生する

要素に 100vw の幅を割り当てると、要素がビューポートの幅全体を占有することが期待されるかもしれません。オーバーフローの原因となります。ただし、特定の状況下では、100vw を使用しているにもかかわらず、水平スクロールバーが表示されることがあります。

次の例を考えてみましょう:

html, body {
  margin: 0;
  padding: 0;
}
.box {
  width: 100vw;
  height: 100vh;
}

<div class="box">Screen 1</div>

このシナリオでは、.box 要素がスクロールバーなしで画面いっぱいに表示されます。ただし、最初の .box 要素の下に 2 番目の .box 要素を追加すると、

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

垂直スクロールバー (予想される) だけでなく、わずかな水平スクロールバーも表示されることがわかります。

この動作の理由は、ブラウザによる 100vw の解釈方法にあります。これは「ビューポートの幅の 100%」を意味しますが、スクロールバーの厚さを考慮した後に残るビューポートの表示部分を表します。この場合、垂直スクロールバーの存在により、使用可能なビューポートの幅が減少し、2 番目の .box 要素が水平方向にオーバーフローする可能性があります。

この問題を解決するには、max-width: 100% を使用できます。 .box 要素:

.box {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
}

これにより、要素が実際のビューポートの幅を超えないようになり、潜在的な水平オーバーフローが効果的に防止されます。

以上が`100vw` が予期しない水平オーバーフローを引き起こすことがあるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。