Warum verschwindet meine untere Polsterung in Firefox, wenn ich „overflow: scroll“ verwende?

Padding-Problem in Firefox mit Overflow: Scroll

Beim Implementieren eines scrollbaren Elements mit overflow: scroll kann in Firefox ein Problem auftreten, bei dem Die untere Polsterung des Elements wird ignoriert. Dies wird beobachtet, obwohl das Padding in Chrome und Safari ordnungsgemäß funktioniert.

Das spezifische Szenario beinhaltet die Anwendung von CSS-Eigenschaften wie padding: /* ... */ und overflow-y: scrollen zu einem Element. In Firefox fehlt der Abstand am unteren Rand des Elements.

Lösung

Während dieses Problem wie ein Fehler in Firefox aussieht, gibt es mithilfe von CSS eine Problemumgehung . Durch Hinzufügen des folgenden Stils zum betroffenen Element kann das Problem mit der unteren Auffüllung behoben werden:

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

Dieses CSS erstellt ein leeres Element nach dem scrollbaren Container und stellt so effektiv die gewünschte untere Auffüllung bereit. Der Höhenwert kann an den gewünschten Füllbetrag angepasst werden.

Implementierung

Die bereitgestellte CSS-Lösung kann implementiert werden, indem Sie den folgenden Code zu Ihrer CSS-Datei hinzufügen:

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

Dieses CSS sollte auf das Element angewendet werden, das von dem Problem betroffen ist.

Das obige ist der detaillierte Inhalt vonWarum verschwindet meine untere Polsterung in Firefox, wenn ich „overflow: scroll“ verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!