overflow:scroll を使用すると、Firefox で下部のパディングが消えるのはなぜですか?

オーバーフロー: スクロールによる Firefox のパディングの問題

オーバーフロー: スクロールを使用してスクロール可能な要素を実装すると、Firefox で問題が発生する可能性があります。要素の下部パディングは無視されます。これは、Chrome と Safari でパディングが適切に機能しているにもかかわらず発生します。

特定のシナリオには、要素に padding: /* ... */ や overflow-y:scroll などの CSS プロパティを適用することが含まれます。 Firefox では、要素の下部のパディングがありません。

解決策

この問題は Firefox のバグのように見えますが、CSS を使用した回避策が存在します。 。影響を受ける要素に次のスタイルを追加することで、下部パディングの問題を解決できます:

.container:after {
    content: "";
    height: 50px;
    display: block;
}

この CSS は、スクロール可能なコンテナの後に空の要素を作成し、目的の下部パディングを効果的に提供します。高さの値は、必要なパディング量に合わせて調整できます。

実装

提供された CSS ソリューションは、次のコードを CSS ファイルに追加することで実装できます。

.container:after {
    content: "";
    height: 50px;
    display: block;
}

この CSS は、問題の影響を受ける要素に適用する必要があります。

以上がoverflow:scroll を使用すると、Firefox で下部のパディングが消えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。