web-dev-qa-db-fra.com

Firefox ignore le remplissage lors de l'utilisation du débordement: scroll

Lorsque vous utilisez overflow: scroll combiné avec la propriété CSS padding: /* ... */, le remplissage au bas de l'élément est manquant dans Firefox. (Mais fonctionne dans Chrome et Safari.)

Voir la démo

Ai-je oublié quelque chose ou y a-t-il une solution quelconque pour résoudre ce problème?

Remarque: la démo n’utilise aucune bibliothèque pour la normalisation, mais j’ai aussi essayé normalize.css, mais sans succès.

cssfirefox
22
miho

dans Firefox, padding-bottom est ignoré avec overflow: auto ou overflow: scroll, voir la documentation. 

https://bugzilla.mozilla.org/show_bug.cgi?id=748518

si vous voulez travailler avec votre exemple pour obtenir le résultat souhaité, voyez le violon: https://jsfiddle.net/nileshmahaja/4vuaf4o3/1/

CSS modifié 

.container {
    height: 200px;
    padding: 50px 50px 0;
    border: solid 1px red;
    overflow-y:auto;
    display:block;
}
ul{
    padding:0 0 50px;
    display:block
}
li {
    padding: 0;
    margin: 0;
}
19
Nilesh Mahajan

Après un peu de brainstorming avec les autres développeurs, bien que peu gracieuse, cette solution de css pur fonctionne:

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

Fiddle

25
Arthurion

Je ne suis pas un partisan de la création d'éléments DOM supplémentaires pour contourner les problèmes d'affichage. Toutefois, cela semble aider à diviser l'élément en deux éléments tels que:

<div class="container">
    <div class="container-inner">
        <!-- long content -->
    </div>
</div>

puis attribuez overflow: scroll à l'élément externe et ajoutez padding: /* ... */ à l'élément interne.

1
miho

J'ai fini par obtenir le même effet (espace entre le dernier élément d'un conteneur à défilement et la fin du conteneur) d'une manière légèrement différente:

.container :last-child {
    margin-bottom: 50px;
}

Peut-être y a-t-il des différences techniques entre ce qui se passe réellement, mais je trouve cela assez efficace.

Voici un Fiddle

0
s-low