Estoy buscando una solución CSS / Javascript para mi problema de desplazamiento de página HTML.

Tengo tres divs que contienen un div, un encabezado y un div contenedor,

Necesito una barra de desplazamiento vertical en el div contenedor, la altura debe ser automática o 100% según el contenido.

El encabezado debe estar arreglado y no quiero la barra de desplazamiento general, así que he dado overflow:hiddenen la etiqueta del cuerpo,

Necesito barra de desplazamiento vertical en mi envoltorio div. ¿Cómo puedo arreglar esto?

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

Consulte este JS Fiddle

Falta la heightpropiedad CSS.

Al agregarlo, notará que aparecerá la barra de desplazamiento.

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

JSFIDDLE

De la documentación :

overflow-y

La propiedad CSS overflow-y especifica si se recorta el contenido, se renderiza una barra de desplazamiento o se muestra el contenido de desbordamiento de un elemento a nivel de bloque, cuando se desborda en los bordes superior e inferior.

La solución es agregar height:100%;a todos los elementos principales de su .wrapper-divtambién. Entonces:

html{
    height: 100%;
}

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

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

Si agrega altura en .wrapperclase, su desplazamiento está funcionando, sin heightdesplazamiento no funciona.

Pruebe esto http://jsfiddle.net/ZcrFr/3/

CSS:

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

No le diste altura al div. Por lo que se estirará automáticamente cuando se agregue más contenido. Dale una altura fija y aparecerán las barras de desplazamiento.

Si establece una altura estática para su encabezado, puede usarla en un cálculo para el tamaño de su envoltorio.

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

Usando su código de ejemplo, puede agregar este 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;
}

O puede usar flexbox para un enfoque más dinámico 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%; 
}

Y si desea ser aún más elegante, eche un vistazo a mi respuesta a esta pregunta https://stackoverflow.com/a/52416148/1513083

Edité tu: 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%;}

Darle a la etiqueta html una altura del 100% es la solución. También eliminé el contenedor div. No lo necesita cuando su diseño se mantiene así.

Quería comentar sobre @Ionica Bizau, pero no tengo suficiente reputación.
Para dar una respuesta a su pregunta sobre el código JavaScript:
Lo que debe hacer es obtener la altura del elemento principal (menos los elementos que ocupan espacio) y aplicarla a los elementos secundarios.

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

La
ventana de la nota podría ser reemplazada por ".container" si ese no tiene hijos flotantes o tiene una solución para calcular la altura correcta. Esta solución usa jQuery.

Para Angular2 + Material2 + Sidenav, deberá hacer lo siguiente:

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

en mi caso, solo height: 100vhsoluciono el problema con el comportamiento esperado

Pruebe esto para una barra de desplazamiento vertical:

overflow-y:scroll;