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

92

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.Contentest généralement supérieure à l'espace fourni par div.FixedHeightContainer. Pour le moment, div.Contents'étend joyeusement du fond de div.FixedHeightContainer- pas du tout ce que je veux.

Comment spécifier que les div.Contentbarres de défilement sont obtenues (de préférence verticales uniquement, mais je ne suis pas difficile) lorsque sa hauteur est trop grande pour s'adapter?

overflow:autoet overflow:scrollne font rien, pour une raison étrange.

css scrollbar overflow

— David
source

154

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

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

— Dutchie432
source

D'accord merci. J'ai donc besoin de spécifier une hauteur pour le contenu div. J'ai supposé que cela fonctionnerait à partir du conteneur qu'il ne rentrerait pas et j'appliquais des barres de défilement sur cette base.

— David

6

Si vous donnez Contentune hauteur fixe, vous ne devriez pas donner FixedHeightContainerune hauteur fixe, car vous ne pouvez pas savoir quelle sera la hauteur de votre titre, il Contentpeut donc être poussé. Voir: jsfiddle.net/ftkbL/2 Vous ne devez définir la hauteur fixe que sur l'élément avec overflow: scroll. Voir jsfiddle.net/ftkbL/3 ou jsfiddle.net/ftkbL/4

— RoToRa

Je vois votre point (à partir du premier lien) mais le texte du titre est connu et est trop court pour se couper sur une ligne à moins que l'utilisateur ne gonfle le texte à une taille peu pratique.

— David

Existe-t-il un moyen d'avoir une hauteur courte et de masquer la barre de défilement en même temps? de cette façon, lorsque les utilisateurs font glisser vers le bas sur les appareils mobiles, ils verront qu'ils font défiler vers le bas, mais sans la lourdeur de voir 2 barres de défilement sur leur navigateur?

— klewis

@blackhawk - Pas à ma connaissance. Vous devrez peut-être utiliser Javascript pour cela. Plus précisément, je pense à la bibliothèque jQuery Draggable: jqueryui.com/draggable - une chose à considérer est ... comment les utilisateurs de bureau sauront-ils faire défiler?

— Dutchie432

2

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

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

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

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

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

— John Love
source

1

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;
}

— Charitha Goonewardena
source

-2

utiliser la overflowpropriété

overflow: hidden; 

overflow: auto;

overflow: scroll;

— bisma
source