Я шукаю рішення CSS / Javascript для моєї проблеми прокрутки HTML-сторінки.

У мене є три діви, які містять div, заголовок та обгортковий div,

Мені потрібна вертикальна смуга прокрутки в оболонці Div, висота повинна бути автоматичною або 100% залежно від вмісту.

Заголовок має бути виправлений, і я не хочу загальної смуги прокрутки, тому я вказав overflow:hiddenу тезі body,

Мені потрібна вертикальна смуга прокрутки в моєму обгортковому диві. Як я можу це виправити?

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

Вам не вистачає 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;
}

Ви не зробили діву висоти. Таким чином, він автоматично розтягується, коли додається більше вмісту. Надайте йому фіксовану висоту, і смуги прокрутки з’являться.

Якщо ви встановите статичну висоту для свого заголовка, ви можете використовувати його у розрахунку на розмір обгортки.

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;