Sto cercando una soluzione CSS / Javascript per il mio problema di scorrimento della pagina HTML.

Ho tre div che contengono un div, un'intestazione e un div wrapper,

Ho bisogno di una barra di scorrimento verticale nel div wrapper, l'altezza dovrebbe essere automatica o 100% in base al contenuto.

L'intestazione dovrebbe essere corretta e non voglio la barra di scorrimento complessiva, quindi ho indicato overflow:hiddennel tag body,

Ho bisogno della barra di scorrimento verticale nel mio div wrapper. Come posso risolvere questo problema?

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

Fare riferimento a questo JS Fiddle

Ti manca la heightproprietà CSS.

Aggiungendolo noterai che apparirà la barra di scorrimento.

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

JSFIDDLE

Dalla documentazione :

overflow-y

La proprietà CSS overflow-y specifica se ritagliare il contenuto, eseguire il rendering di una barra di scorrimento o visualizzare il contenuto di overflow di un elemento a livello di blocco, quando trabocca sui bordi superiore e inferiore.

La soluzione è aggiungere anche height:100%;a tutti gli elementi principali del tuo .wrapper-div. Così:

html{
    height: 100%;
}

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

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

Se aggiungi l'altezza in .wrapperclasse, il tuo scroll funziona, senza heightscroll non funziona.

Prova questo http://jsfiddle.net/ZcrFr/3/

CSS:

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

Non hai dato un'altezza al div. Quindi si allungherà automaticamente quando viene aggiunto più contenuto. Dagli un'altezza fissa e verranno visualizzate le barre di scorrimento.

Se imposti un'altezza statica per la tua intestazione, puoi usarla in un calcolo per la dimensione del tuo wrapper.

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

Utilizzando il tuo codice di esempio, puoi aggiungere questo 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;
}

Oppure puoi utilizzare flexbox per un approccio più dinamico 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%; 
}

E se vuoi diventare ancora più elaborato, dai un'occhiata alla mia risposta a questa domanda https://stackoverflow.com/a/52416148/1513083

Ho modificato il tuo: 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%;}

Dare al tag html un'altezza del 100% è la soluzione. Ho anche eliminato il contenitore div. Non ne hai bisogno quando il tuo layout rimane così.

Volevo commentare @Ionica Bizau, ma non ho abbastanza reputazione.
Per dare una risposta alla tua domanda sul codice javascript:
Quello che devi fare è ottenere l'altezza dell'elemento genitore (meno gli elementi che occupano spazio) e applicarla agli elementi figli.

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

Nota la
finestra potrebbe essere sostituita da ".container" se quella non ha figli flottanti o ha una correzione per ottenere l'altezza corretta calcolata. Questa soluzione utilizza jQuery.

Per Angular2 + Material2 + Sidenav, dovrai fare quanto segue:

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

nel mio caso, height: 100vhrisolvi il problema solo con il comportamento previsto

Prova questo per una barra di scorrimento verticale:

overflow-y:scroll;