Le débordement de défilement du CSS ne fonctionne pas dans la division

Question

Je cherche une solution en CSS/Javascript pour résoudre le problème de défilement de ma page HTML.

J'ai trois divs qui contiennent une div, un en-tête et une div d'enveloppe,

J'ai besoin d'une barre de défilement verticale dans la div d'enveloppe, la hauteur devrait être automatique ou à 100% en fonction du contenu.

L'en-tête devrait être fixe, et je ne veux pas de barre de défilement globale donc j'ai donné overflow:hidden dans la balise body,

J'ai besoin d'une barre de défilement verticale dans ma div d'enveloppe. Comment puis-je résoudre cela?

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%
}

#container {
  width: 1000px;
  margin: 0 auto;
}

.header {
  width: 1000px;
  height: 30px;
  background-color: #dadada;
}

.wrapper {
  width: 1000px;
  overflow: scroll;
  position: relative;
}

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim.
      Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam
      luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.

Veuillez consulter ce JS Fiddle

Answer 1

Vous manquez la propriété CSS height.

En l'ajoutant, vous remarquerez que la barre de défilement apparaîtra.

.wrapper{ 
    // width: 1000px;
    width:600px; 
    overflow-y:scroll; 
    position:relative;
    height: 300px;
}

JSFIDDLE

De documentation:

overflow-y

La propriété CSS overflow-y spécifie s'il faut recadrer le contenu, afficher une barre de défilement ou afficher le contenu en cas de débordement d'un élément de niveau bloc, lorsqu'il déborde sur les bords supérieur et inférieur.

Answer 2

La solution consiste à ajouter height:100%; à tous les éléments parents de votre .wrapper-div également. Donc:

html{
    height: 100%;
}

body{ 
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}

#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}

Answer 3

Si vous ajoutez de la hauteur dans la classe .wrapper, alors votre scroll fonctionne, sans height le scroll ne fonctionne pas.

Essayez ceci http://jsfiddle.net/ZcrFr/3/

CSS:

.wrapper {
  position: relative;
  overflow: scroll;
  width: 1000px;
  height: 800px;
}

Answer 4

Vous n'avez pas donné à la div une hauteur. Elle s'étirera automatiquement lorsque plus de contenu sera ajouté. Donnez-lui une hauteur fixe et les barres de défilement apparaîtront.

Answer 5

Dans mon cas, seule height: 100vh corrige le problème avec le comportement attendu