Pourquoi mon remplissage inférieur disparaît-il dans Firefox lors de l'utilisation de overflow: scroll ?

Problème de remplissage dans Firefox avec Overflow : Scroll

Lors de l'implémentation d'un élément déroulant à l'aide de overflow: scroll, vous pouvez rencontrer un problème dans Firefox où le remplissage inférieur de l'élément est ignoré. Ceci est observé malgré le bon fonctionnement du remplissage dans Chrome et Safari.

Le scénario spécifique implique l'application de propriétés CSS telles que padding : /* ... */ et overflow-y : faites défiler jusqu'à un élément. Dans Firefox, le remplissage en bas de l'élément est manquant.

Solution

Bien que ce problème puisse sembler être un bug dans Firefox, il existe une solution de contournement utilisant CSS . En ajoutant le style suivant à l'élément affecté, le problème de remplissage inférieur peut être résolu :

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

Ce CSS crée un élément vide après le conteneur déroulant, fournissant ainsi le remplissage inférieur souhaité. La valeur de hauteur peut être ajustée pour correspondre à la quantité de remplissage souhaitée.

Implémentation

La solution CSS fournie peut être implémentée en ajoutant le code suivant à votre fichier CSS :

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

Ce CSS doit être appliqué à l'élément affecté par le problème.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!