CSS: comment obtenir des barres de défilement pour une div à l'intérieur d'un conteneur de hauteur fixe

Question

J'ai le balisage suivant:

  Titre

    ..blah blah blah...

Le CSS ressemble à ceci:

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

En raison de son contenu, la hauteur de div.Content est généralement supérieure à l'espace fourni par div.FixedHeightContainer. En ce moment, div.Content s'étend joyeusement en dehors du bas de div.FixedHeightContainer - pas du tout ce que je veux.

Comment spécifier que div.Content obtient des barres de défilement (de préférence verticales seulement, mais je ne suis pas difficile) lorsque sa hauteur est trop grande pour s'adapter?

overflow:auto et overflow:scroll ne font rien, pour une raison bizarre.

Answer 1

La définition de overflow devrait s'en charger, mais vous devez également définir la hauteur de Content. Si l'attribut de hauteur n'est pas défini, la div va s'étendre verticalement aussi haut qu'il le faut, et les barres de défilement ne seront pas nécessaires.

Voir exemple: http://jsfiddle.net/ftkbL/1/

Answer 2

FWIW, voici mon approche = une approche simple qui fonctionne pour moi :

blah blah blah

html, body {
   height: 100%;
   margin: 0em;
}

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}

Answer 3

C'est une excellente question car la réponse n'est pas immédiatement évidente pour une tâche aussi simple. Le problème m'a frappé plusieurs fois au fil des ans, et il semble que je doive toujours y réfléchir avant de le résoudre correctement.

Voici ma solution qui utilise (uniquement) deux classes CSS, 'innerDiv' et 'outerDiv'.

     A  B  C  D 

    #outerDiv
    { height : 200px;
      margin : 44px; border: solid 4px Red;
    }

    #innerDiv
    { height     : 80%;
      overflow-y : auto;
      border     : solid 4px Green; font-size: 300%;
    }

Pourquoi cela fonctionne-t-il, et pourquoi dis-je que la réponse n'est pas immédiatement évidente?

Dans l'exemple ci-dessus, à la fois le outerDiv et innerDiv ont une hauteur fixe car nous avons défini la propriété height pour les deux.

Nous avons la hauteur de innerDiv inférieure à la hauteur de outerDiv. Par conséquent, innerDiv "s'insère" dans le outer-div et donc le outer div ne devrait pas avoir de barre de défilement, n'est-ce pas? Oui, sauf si innerDiv contient tellement de contenu qu'il ne rentre pas dans la hauteur fixe de innerDiv mais dépasse. La question est donc comment empêcher le débordement de inner div?

La façon de prévenir le débordement de innerDiv est de lui donner l'attribut "overflow: auto", ou "overflow-y: auto" si nous voulons uniquement prévenir le débordement vertical.

La raison pour laquelle la solution n'est "pas immédiatement évidente" est la suivante: la valeur par défaut de 'overflow' n'est PAS 'auto', mais 'visible'.

On pourrait (à tort) supposer que la valeur par défaut de overflow est "auto", car alors tout devrait être automatiquement pris en charge, n'est-ce pas? Pas si vite, la valeur par défaut de overflow est 'visible', PAS 'auto'.

Donc, si vous supprimez "overflow-y:auto" de l'exemple ci-dessus, il n'y aura pas de barres de défilement. Si vous le supprimez mais l'ajoutez au outerDiv, le outer div aura la barre de défilement, ce qui n'est PAS ce que nous voulons. Si vous le mettez dans les deux, seule innerDiv l'aura.

Answer 4

Code de la réponse ci-dessus par Dutchie432

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

Answer 5

HTML

  Title

    ..blah blah blah...

CSS

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
  overflow-y: scroll;
}

/*MODIFICATIONS DE LA BARRE DE DÉFILEMENT*/

.FixedHeightContainer::-webkit-scrollbar {
    width: 8px;
}

.FixedHeightContainer::-webkit-scrollbar-thumb {
    background: #909090;
    border-radius: 8px;
}
.FixedHeightContainer::-webkit-scrollbar-track {
    background: #FFFFFF;
}