ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。