Je recherche une solution CSS / Javascript pour mon problème de défilement de page HTML.

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

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

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

J'ai besoin d'une barre de défilement verticale dans mon div wrapper. Comment puis-je réparer cela?

HTML

<div id="container">

    <div class="header"></div>

    <div class="wrapper">
        <p>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.</p>
        <!-- Lots more paragraphs-->
    </div>

</div>

CSS

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

Veuillez vous référer à ce JS Fiddle

Il vous manque la heightpropriété CSS.

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 la documentation :

overflow-y

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

La solution est d'ajouter également height:100%;à tous les éléments parents de votre .wrapper-div. Alors:

html{
    height: 100%;
}

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

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

Si vous ajoutez de la hauteur en .wrapperclasse, votre défilement fonctionne, sans heightdéfilement ne fonctionne pas.

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

CSS:

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

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

Si vous définissez une hauteur statique pour votre en-tête, vous pouvez l'utiliser dans un calcul de la taille de votre wrapper.

http://jsfiddle.net/ske5Lqyv/5/

En utilisant votre exemple de code, vous pouvez ajouter ce CSS:

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

#container {
  height: 100%;
}

.header {
  height: 64px;
  background-color: lightblue;
}

.wrapper {
  height: calc(100% - 64px);
  overflow-y: auto;
}

Ou, vous pouvez utiliser flexbox pour une approche plus dynamique http://jsfiddle.net/19zbs7je/3/

<div id="container">
  <div class="section">
    <div class="header">Heading</div>
    <div class="wrapper">
      <p>Large Text</p>
    </div>
  </div>
</div>

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

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.header {
  height: 64px;
  background-color: lightblue;
  flex-shrink: 0;
}

.wrapper {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%; 
}

Et si vous souhaitez être encore plus chic, jetez un œil à ma réponse à cette question https://stackoverflow.com/a/52416148/1513083

J'ai édité votre: Fiddle

html, body{ margin:0; padding:0; overflow:hidden; height:100% }
.header { margin: 0 auto; width:500px; height:30px; background-color:#dadada;}
.wrapper{ margin: 0 auto; width:500px; overflow:scroll; height: 100%;}

Donner au tag html une hauteur de 100% est la solution. J'ai également supprimé le conteneur div. Vous n'en avez pas besoin lorsque votre mise en page reste comme ça.

Je voulais faire un commentaire sur @Ionica Bizau, mais je n'ai pas assez de réputation.
Pour répondre à votre question sur le code javascript:
ce que vous devez faire est d'obtenir la hauteur de l'élément parent (moins tous les éléments qui prennent de l'espace) et de l'appliquer aux éléments enfants.

function wrapperHeight(){
    var height = $(window).outerHeight() - $('#header').outerHeight(true);
    $('.wrapper').css({"max-height":height+"px"});      
}

Remarque la
fenêtre pourrait être remplacée par ".container" si celle-ci n'a pas d'enfants flottants ou a un correctif pour calculer la hauteur correcte. Cette solution utilise jQuery.

Pour Angular2 + Material2 + Sidenav, vous devrez effectuer les opérations suivantes:

 ngAfterViewInit() {
   this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; 
  }

dans mon cas, ne height: 100vhrésolvez le problème qu'avec le comportement attendu

Essayez ceci pour une barre de défilement verticale:

overflow-y:scroll;