web-dev-qa-db-fra.com

css - appliquer le remplissage à la boîte avec défilement, le remplissage inférieur ne fonctionne pas

Je ne parviens pas à faire fonctionner le remplissage du bas lorsque j'utilise overflow-y: auto sur une boîte.

HTML:

<div id="container">
    <div id="some_info"></div>
</div>

CSS:

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 900px;
    background: #000;
}

Violon: http://jsfiddle.net/rwgZu/

EDIT: j'utilise Firefox

htmlcssfirefoxoverflowpadding
34
Philip

Une solution de plus sans DIV supplémentaire.

#container:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

Travailler dans FF, Chrome, IE8-10.

36
isHristov

Je suis en retard à la fête, mais j'ai pensé qu'il valait la peine d'ajouter une solution différente qui répond à certaines des préoccupations soulevées ci-dessus.

Je suis venu ici en raison exactement du genre de situation que @Philip a soulevée en réponse à la solution d'Alexandre Lavoie: j'ai généré dynamiquement du contenu à l'intérieur du conteneur, donc je ne peux pas simplement appliquer un style à un nom de div spécifique comme #some_info.

Heureusement, il existe une solution simple pour les navigateurs prenant en charge CSS3: au lieu d'appliquer un remplissage inférieur au conteneur, appliquez une marge inférieure au dernier élément enfant à l'intérieur du conteneur.

#container > :last-child {
    margin-bottom: 3em;
}

Tant que le dernier élément enfant de la division de conteneur est un élément de niveau bloc, cela devrait faire l'affaire.

DÉMO: http://jsfiddle.net/rwgZu/240/

P.S. Si l'incapacité de Firefox à défiler vers le bas du rembourrage est en effet un bogue (comme suggéré par @Kyle), il n'a toujours pas été corrigé à partir de Firefox 47.0. Frustrant! Internet Explorer 11.0.9600.17843 présente le même comportement. (Google Chrome, en revanche, affiche le rembourrage inférieur comme prévu.)

9
Dan Robinson

Voici une approche possible qui fonctionne parfaitement:

#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
}

#some_info {
    height: 900px;
    background: #000;
    border: 3em solid red;
}
4
Alexandre Lavoie

Démo

Salut maintenant habitué à ce CSS

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0; // add this line in your css
}

#some_info {
    height: 900px;
    background: #000;
    margin-bottom:3em; // add this line in your css
}

Démo

2
Rohit Azad

Les solutions ci-dessus ne fonctionnaient pas pour mes besoins, et je pense que je suis tombé sur une solution simple.

Si votre conteneur et votre contenu débordant partagent la même couleur d'arrière-plan, vous pouvez ajouter une bordure supérieure et inférieure avec la couleur correspondant à la couleur d'arrière-plan . Pour créer un rembourrage égal tout autour, définissez une largeur de bordure égale au rembourrage gauche et droit du conteneur.

Lien vers la version modifiée du violon d'OP: http://jsfiddle.net/dennisoneil/rwgZu/508/

Un exemple simple ci-dessous.

Remarque : Stack Overflow met les résultats de l'extrait dans un défilement de débordement, ce qui rend un peu plus difficile de voir ce qui se passe sur. Le violon peut être votre meilleure option de prévisualisation.

#container {
  background: #ccc;
  overflow-y: scroll;
  height: 190px;
  padding: 0 20px;
  border-top: 20px solid #ccc;
  border-bottom: 20px solid #ccc;
}
#overflowing {
  background: #ccc;
}
<div id="container">
  <div id="overflowing">
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>    
  </div>
</div>
2
Dennis O'Neil

Basé sur réponse de isHristov :

#container {
    padding: 3em 3em 0 3em; /* padding-bottom: 0 */
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#container:after {
    content: "";
    display: block;
    height: 0;
    width: 100%;
    margin-bottom: 3em; /* length you wanted on padding-bottom */
}

Cependant, sa solution ajoute de l'espace supplémentaire dans les navigateurs qui gèrent correctement cette situation.

réponse de Dan Robinson est également très bien sauf si vous avez plusieurs éléments, dans #container, qui sont dynamiquement affichés/cachés. Dans ce cas: le dernier enfant peut cibler un élément caché et n'a aucun effet.

1
LGT

Stylisez le div parent normalement et faites le div intérieur faire ce que vous voulez qu'il fasse.

Retirer overflow-x et overflow le #container, remplacez height par 100% et ajouter overflow-y:scroll; sur #some_info

#container {
    padding: 3em;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 100%;
    background: #000;
    overflow-y:scroll;
    width:100%;
}

Démonstration de travail: http://jsfiddle.net/9yuohxuh/

1
Barrett Kuethen

Ce n'est pas seulement avec un rembourrage inférieur. Le remplissage/bordure/espacement droit est également ignoré (vous ne pouvez pas le voir dans votre exemple car il n'a pas de contenu et la largeur ne défile pas)

Toutes les réponses ci-dessus échouent dans chrome 43, générant jusqu'à 3 barres de défilement! Ou si le contenu déborde #some_info.

Exemple: http://jsfiddle.net/LwujL3ad/

Si cela a fonctionné pour vous, c'est probablement parce que le contenu n'était pas aussi large que l'élément de défilement ou de taille fixe.

La bonne solution est:

Définissez # quelques informations pour afficher: table, et ajoutez-y un remplissage ou une bordure, pas au conteneur de défilement.

#container {
    overflow: scroll;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0;
}

    #some_info {
    display:table;
    border: solid 3em red;
    height: 900px;
    background: #000;
    margin-bottom:3em;
    color: white;
}

DÉMO: http://jsfiddle.net/juh7802x/

Le seul élément qui n'échoue pas et respecte TOUT cadre et remplissage que vous y ajoutez comme séparateur est un TABLEAU.

J'ai essayé, et peu importe qu'il s'agisse du prochain enfant direct ou qu'il soit imbriqué de nombreux éléments en profondeur, aucun style non contenu ne se développera pour envelopper le contenu et restera à 100% de la largeur du parent. Ce qui est absurde, car avoir un contenu PLUS GRAND que le parent est EXACTEMENT le scénario dans lequel une div de défilement est requise!

Pour une solution dynamique (à la fois le conteneur et le contenu), définissez le conteneur des éléments à l'intérieur du conteneur de défilement pour afficher: table.

0
sergio