100vw によって水平オーバーフローが発生するのはなぜですか?それを修正するにはどうすればよいですか?

100vw による水平オーバーフロー: その理由と解決策の詳細

「ビューポート幅の 100%」を表す 100vw の使用法、」は、表示される画面の幅を満たすことを目的としています。ただし、この幅の複数の要素を垂直方向に使用すると、水平スクロールバーという奇妙な現象が発生します。

根本原因:

この問題を理解する鍵は次のとおりです。コンテンツが垂直方向にオーバーフローする Web ブラウザーの動作に問題があります。コンテンツがビューポートの高さを超えると、垂直スクロールバーが追加されます。ただし、一部のブラウザでは、この垂直スクロールバーによって、ブラウザの内部計算により水平スクロールバーが発生する場合もあります。

解決策:

この不要な水平スクロールバーを防ぐには、 CSS プロパティ max-width: 100% は、幅 100vw の要素に追加できます。この追加ルールにより、コンテンツが垂直方向にオーバーフローした場合でも、要素の幅がビューポートの幅の 100% を超えないことが保証されます。

改訂コード:

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

max-width: 100% を組み込むと、水平スクロールバーが消え、幅 100vw の複数の要素が辺なしで画面いっぱいに表示されるようになります。

したがって、100vw での水平方向のオーバーフローは、コンテンツがオーバーフローするブラウザーの動作により、この幅の要素が複数ある場合にのみ発生します。 max-width: 100% を追加すると、この問題は解決され、要素が水平方向にオーバーフローすることなく画面いっぱいに表示されます。

以上が100vw によって水平オーバーフローが発生するのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。