web-dev-qa-db-fra.com

CSS: comment obtenir des barres de défilement pour div dans un conteneur de hauteur fixe

J'ai le balisage suivant:

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

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. Pour le moment, div.Content s'étend joyeusement 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 uniquement verticales, mais je ne suis pas difficile) lorsque sa hauteur est trop grande pour tenir?

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

cssscrollbaroverflow
79
David

régler overflow devrait en prendre soin, mais vous devez également régler la hauteur de Content. Si l'attribut height n'est pas défini, le div grandira verticalement aussi haut que nécessaire, et les barres de défilement ne seront pas nécessaires.

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

135
Dutchie432

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;
}
2
Charitha Goonewardena

utiliser la propriété overflow

overflow: hidden; 

overflow: auto;

overflow: scroll;

ça va marcher inchaAllah :)

0
bisma