html - 100vw と vh を使用すると、ビューポートサイズを超える余分なスペースが作成されます。どうすればそれを取り除くことができますか？

Question

div で 100 vw と 100vh を使用してフルスクリーンフレームを作成しようとしています。この JSfiddleには 2 つあり、ご覧のとおり、各フレームの下部と右側の両方に余分なスペースがあります。

vw と vh を使用して、余分なスペースなしで完全にフィットさせる方法はありますか?

css は次のようになります。

.f1 {
    width: 100vw;
    height: 100vh;
    background-color: blue;
}

.f2 {
    width: 100vw;
    height: 100vh;
    background-color: grey;
}

※編集：横幅を100%にすれば解決するようですが、この解決法でよろしいでしょうか？それは何かを壊しますか？

score 6 · Accepted Answer

にスクロールバーが含まれているvwためvh、ビューポートを超えて表示できるようにスクロールが追加されます。

この問題を解決するには、使用できます

max-width :100%

html - 100vw と vh を使用すると、ビューポート サイズを超える余分なスペースが作成されます。どうすればそれを取り除くことができますか？