複数の 100vw width 要素によって水平スクロールバーが作成されるのはなぜですか?

100vw 水平オーバーフローの謎

Web 開発の領域では、100vw 単位は、領域を占める要素の幅を設定するためによく使用されます。ビューポートの全幅。ただし、幅 100vw の要素を複数連続して配置すると、興味深い問題が発生します。期待どおりに画面を埋める代わりに、垂直スクロールバーが不可解な水平スクロールとともに表示されます。

この現象を理解するために、CSS コードを詳しく調べてみましょう。

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

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

単一の要素で、 div はスクロールせずに画面幅全体を埋めます。ただし、同じクラスの別の div を追加すると、前述のスクロールの問題が発生します。

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

この動作の原因は 100vw の性質にあります。これはビューポートの幅の 100% を表しますが、ビューポート サイズの変化に応じて変動する流動的な単位です。たとえば、ユーザーがブラウザ ウィンドウのサイズを狭くすると、それに応じて div は 100vw の幅を維持しながら縮小します。

100vw を使用する複数の div では、ウィンドウが十分に広い場合、横に収まる十分なスペースがあります。 -そばに。ただし、ウィンドウが特定の幅未満に縮小すると、div はそれ以上縮小できなくなります。代わりに、それらは重なり始め、水平方向のオーバーフローが作成されます。

重なり合った結果、垂直スクロールバーが表示されます。ブラウザーにはスクロールバーが導入され、ユーザーが水平にスクロールして、重なっている div の下に隠れているコンテンツにアクセスできるようになります。

この問題を修正するには、div で max-width プロパティを使用して、最大幅を 100 に制限します。 %:

.box {
  max-width: 100%;
}

これにより、十分なスペースがある限り、div はビューポートの幅全体を占有することになります。ただし、ウィンドウが狭くなり、div が並べて収まらない場合は、縮小して垂直方向に積み重ねられるため、水平方向のオーバーフローと水平スクロールの必要性がなくなります。

以上が複数の 100vw width 要素によって水平スクロールバーが作成されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。