Я ищу решение CSS / Javascript для моей проблемы с прокруткой HTML-страницы.

У меня есть три div, которые содержат div, заголовок и обертку div,

Мне нужна вертикальная полоса прокрутки в div-оболочке, высота должна быть автоматической или 100% в зависимости от содержимого.

Заголовок должен быть исправлен, и мне не нужна общая полоса прокрутки, поэтому я указал overflow:hiddenв теге body,

Мне нужна вертикальная полоса прокрутки в моей обертке div. Как я могу это исправить?

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

Пожалуйста, обратитесь к этой JS Fiddle

Вам не хватает heightсвойства CSS.

Добавив его, вы заметите, что появится полоса прокрутки.

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

JSFIDDLE

Из документации :

overflow-y

Свойство CSS overflow-y указывает, следует ли обрезать содержимое, отображать полосу прокрутки или отображать содержимое переполнения элемента уровня блока, когда оно переполняется на верхнем и нижнем краях.

Решение состоит в том, чтобы добавить height:100%;ко всем родительским элементам вашего .wrapper-div. Так:

html{
    height: 100%;
}

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

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

Если вы добавляете высоту в .wrapperклассе, то ваша прокрутка работает, без heightпрокрутки не работает.

Попробуйте это http://jsfiddle.net/ZcrFr/3/

CSS:

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

Вы не указали высоту div. Таким образом, он будет автоматически растягиваться при добавлении большего количества контента. Установите фиксированную высоту, и появятся полосы прокрутки.

Если вы установите статическую высоту для своего заголовка, вы можете использовать ее при вычислении размера вашей оболочки.

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

Используя ваш пример кода, вы можете добавить этот 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;
}

Или вы можете использовать flexbox для более динамичного подхода 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%; 
}

И если вы хотите стать еще интереснее, взгляните на мой ответ на этот вопрос https://stackoverflow.com/a/52416148/1513083

Я редактировал ваш: 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%;}

Решением является установка высоты html-тега на 100%. Я также удалил контейнер div. Вам это не нужно, когда ваш макет остается таким.

Я хотел прокомментировать @Ionica Bizau, но у меня недостаточно репутации.
Чтобы ответить на ваш вопрос о коде javascript:
вам нужно получить высоту родительского элемента (за вычетом любых элементов, занимающих место) и применить ее к дочерним элементам.

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

Окно примечания может быть заменено на «.container», если у него нет плавающих дочерних элементов или есть исправление для получения правильной рассчитанной высоты. В этом решении используется jQuery.

Для Angular2 + Material2 + Sidenav вам необходимо сделать следующее:

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

в моем случае только height: 100vh исправляем проблему с ожидаемым поведением

Попробуйте это для вертикальной полосы прокрутки:

overflow-y:scroll;