Saya mencari solusi CSS / Javascript untuk masalah pengguliran halaman HTML saya.

Saya memiliki tiga div yang berisi div, header dan div pembungkus,

Saya membutuhkan scrollbar vertikal di div pembungkus, tinggi harus otomatis atau 100% berdasarkan konten.

Header harus diperbaiki, dan saya tidak ingin scrollbar keseluruhan jadi saya berikan overflow:hiddendi tag body,

Saya membutuhkan scrollbar vertikal di div pembungkus saya. Bagaimana cara memperbaikinya?

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

Silakan lihat JS Fiddle ini

Anda kehilangan heightproperti CSS.

Menambahkannya, Anda akan melihat bahwa bilah gulir akan muncul.

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

JSFIDDLE

Dari dokumentasi :

overflow-y

Properti overflow-y CSS menentukan apakah akan mem-klip konten, merender bilah gulir, atau menampilkan konten melimpah dari elemen tingkat blok, ketika meluap di tepi atas dan bawah.

Solusinya adalah menambahkan height:100%;ke semua elemen induk .wrapper-divjuga. Begitu:

html{
    height: 100%;
}

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

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

Jika Anda menambahkan tinggi di .wrapperkelas maka gulungan Anda berfungsi, tanpa heightscroll tidak berfungsi.

Coba http://jsfiddle.net/ZcrFr/3/ ini

CSS:

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

Anda tidak memberikan ketinggian div. Jadi secara otomatis akan meregang ketika lebih banyak konten ditambahkan. Berikan ketinggian tetap dan bilah gulir akan muncul.

Jika Anda menyetel tinggi statis untuk header, Anda dapat menggunakannya dalam penghitungan ukuran pembungkus Anda.

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

Menggunakan kode contoh Anda, Anda dapat menambahkan CSS ini:

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

Atau, Anda dapat menggunakan flexbox untuk pendekatan yang lebih dinamis 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%; 
}

Dan jika Anda ingin menjadi lebih menarik, lihat tanggapan saya untuk pertanyaan ini https://stackoverflow.com/a/52416148/1513083

Saya mengedit: 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%;}

Memberikan tag html tinggi 100% adalah solusinya. Saya juga menghapus div kontainer. Anda tidak membutuhkannya saat tata letak Anda tetap seperti ini.

Saya ingin mengomentari @Ionica Bizau, tetapi reputasi saya tidak cukup.
Untuk menjawab pertanyaan Anda tentang kode javascript:
Yang perlu Anda lakukan adalah mendapatkan tinggi elemen induk (dikurangi elemen apa pun yang memakan ruang) dan menerapkannya ke elemen anak.

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

Jendela catatan dapat diganti dengan ".container" jika jendela itu tidak memiliki anak mengambang atau memiliki perbaikan untuk mendapatkan ketinggian yang benar dihitung. Solusi ini menggunakan jQuery.

Untuk Angular2 + Material2 + Sidenav, Anda harus melakukan hal berikut:

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

dalam kasus saya, height: 100vhperbaiki masalah hanya dengan perilaku yang diharapkan

Coba ini untuk scrollbar vertikal:

overflow-y:scroll;