Estou procurando uma solução CSS / Javascript para o meu problema de rolagem de página HTML.

Eu tenho três divs que contêm uma div, um cabeçalho e uma div wrapper,

Preciso de uma barra de rolagem vertical na div do wrapper, a altura deve ser automática ou 100% com base no conteúdo.

O cabeçalho deve ser fixo, e eu não quero a barra de rolagem geral, por isso forneci overflow:hiddenna tag body,

Eu preciso da barra de rolagem vertical na minha div wrapper. Como posso consertar isso?

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

Por favor, consulte este JS Fiddle

Está faltando a heightpropriedade CSS.

Adicionando-o, você notará que a barra de rolagem aparecerá.

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

JSFIDDLE

Da documentação :

overflow-y

A propriedade CSS overflow-y especifica se deve recortar o conteúdo, renderizar uma barra de rolagem ou exibir o conteúdo excedente de um elemento no nível do bloco, quando ele excede as bordas superior e inferior.

A solução é adicionar height:100%;a todos os elementos pai do seu .wrapper-divtambém. Assim:

html{
    height: 100%;
}

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

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

Se você adicionar altura na .wrapperaula, seu pergaminho está funcionando, sem o heightpergaminho não está funcionando.

Tente isso http://jsfiddle.net/ZcrFr/3/

CSS:

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

Você não deu uma altura ao div. Portanto, ele se estenderá automaticamente quando mais conteúdo for adicionado. Dê uma altura fixa e as barras de rolagem aparecerão.

Se você definir uma altura estática para o cabeçalho, poderá usá-la em um cálculo para o tamanho do seu invólucro.

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

Usando seu código de exemplo, você pode adicionar 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;
}

Ou você pode usar o flexbox para uma abordagem mais dinâmica 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 você quiser ficar ainda mais chique, dê uma olhada na minha resposta a esta pergunta https://stackoverflow.com/a/52416148/1513083

Eu editei o seu: 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%;}

Dar à tag html uma altura de 100% é a solução. Também excluí a div do contêiner. Você não precisa disso quando seu layout permanece assim.

Eu queria comentar sobre @Ionica Bizau, mas não tenho reputação suficiente.
Para responder à sua pergunta sobre o código javascript:
O que você precisa fazer é obter a altura do elemento pai (menos quaisquer elementos que ocupam espaço) e aplicá-la aos elementos filhos.

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

A
janela de anotações pode ser substituída por ".container" se aquele não tiver filhos flutuantes ou tiver uma correção para obter a altura correta calculada. Esta solução usa jQuery.

Para Angular2 + Material2 + Sidenav, você precisará fazer o seguinte:

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

no meu caso, apenas height: 100vhcorrija o problema com o comportamento esperado

Tente isto para uma barra de rolagem vertical:

overflow-y:scroll;