HTML sayfası kaydırma sorunum için CSS / Javascript çözümü arıyorum.

Bir div, bir başlık ve bir sarmalayıcı div içeren üç div'im var.

Sarmalayıcı div'de dikey bir kaydırma çubuğuna ihtiyacım var, içeriğe göre yükseklik otomatik veya% 100 olmalıdır.

Başlık sabitlenmeli ve genel kaydırma çubuğunu istemiyorum, bu nedenle overflow:hiddengövde etiketinde verdim ,

Wrapper div'imde dikey kaydırma çubuğuna ihtiyacım var. Bunu nasıl düzeltebilirim?

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

Lütfen bu JS Fiddle'a bakın

heightCSS mülkünüz eksik .

Eklediğinizde, kaydırma çubuğunun görüneceğini fark edeceksiniz.

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

JSFIDDLE

Gönderen belgeler :

overflow-y

Overflow-y CSS özelliği, üst ve alt kenarlarda taştığında blok düzeyindeki bir öğenin içeriğinin kırpılıp kırpılmayacağını, bir kaydırma çubuğunun oluşturulup oluşturulmayacağını veya taşma içeriğinin görüntülenip görüntülenmeyeceğini belirtir.

Çözüm, height:100%;sizin tüm ana unsurlarınızı da eklemektir .wrapper-div. Yani:

html{
    height: 100%;
}

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

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

.wrapperSınıfta yükseklik eklerseniz , heightkaydırmanız çalışmaz , kaydırma olmadan çalışmaz.

Bu http://jsfiddle.net/ZcrFr/3/ deneyin

CSS:

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

Div'e yükseklik vermedin. Böylece, daha fazla içerik eklendiğinde otomatik olarak genişleyecektir. Bir sabit yükseklik verin ve kaydırma çubukları görünecektir.

Başlığınız için statik bir yükseklik ayarlarsanız, bunu sarmalayıcınızın boyutu için bir hesaplamada kullanabilirsiniz.

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

Örnek kodunuzu kullanarak bu CSS'yi ekleyebilirsiniz:

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

Veya daha dinamik bir yaklaşım için flexbox'ı kullanabilirsiniz 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%; 
}

Daha da meraklısı olmak istiyorsanız, bu soruya verdiğim yanıta bir göz atın https://stackoverflow.com/a/52416148/1513083

Senin: Fiddle'ı düzenledim

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

Çözüm, html etiketine% 100 yükseklik vermek. Ayrıca kapsayıcı div'i de sildim. Düzeniniz böyle kaldığında buna ihtiyacınız yok.

@Ionica Bizau hakkında yorum yapmak istedim, ancak yeterli itibarım yok.
Javascript kodu ile ilgili sorunuza cevap vermek için:
Yapmanız gereken şey, ebeveynin eleman yüksekliğini (yer kaplayan tüm elemanlar hariç) almak ve bunu alt elemanlara uygulamaktır.

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

Not
penceresi, kayan alt öğesi yoksa veya doğru yüksekliği hesaplamak için bir düzeltme varsa, ".container" ile değiştirilebilir. Bu çözüm jQuery kullanır.

Angular2 + Material2 + Sidenav için aşağıdakileri yapmanız gerekir:

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

benim durumumda, height: 100vhsorunu yalnızca beklenen davranışla düzeltin

Dikey kaydırma çubuğu için şunu deneyin:

overflow-y:scroll;