Szukam rozwiązania CSS / Javascript dla mojego problemu z przewijaniem strony HTML.

Mam trzy elementy div zawierające element div, nagłówek i opakowujący element div,

Potrzebuję pionowego paska przewijania w otoku div, wysokość powinna być ustawiona na auto lub 100% w zależności od zawartości.

Nagłówek powinien zostać naprawiony i nie chcę ogólnego paska przewijania, więc podałem overflow:hiddenw tagu body,

Potrzebuję pionowego paska przewijania w moim opakowującym div. Jak mogę to naprawić?

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

Proszę odnieść się do tego JS Fiddle

Brakuje heightwłaściwości CSS.

Dodając go, zauważysz, że pojawi się pasek przewijania.

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

JSFIDDLE

Z dokumentacji :

overflow-y

Właściwość overflow-y CSS określa, czy należy przyciąć zawartość, wyrenderować pasek przewijania lub wyświetlić zawartość przepełnienia elementu blokowego, gdy przepełnia on górną i dolną krawędź.

Rozwiązaniem jest dodanie również height:100%;do wszystkich elementów nadrzędnych .wrapper-div. Więc:

html{
    height: 100%;
}

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

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

Jeśli dodasz wysokość w .wrapperklasie, twój zwój działa, bez heightzwoju nie działa.

Spróbuj tego http://jsfiddle.net/ZcrFr/3/

CSS:

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

Nie podałeś wysokości div. Dzięki temu będzie automatycznie rozciągany po dodaniu większej zawartości. Daj mu stałą wysokość, a pojawią się paski przewijania.

Jeśli ustawisz statyczną wysokość dla swojego nagłówka, możesz użyć jej do obliczenia rozmiaru opakowania.

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

Korzystając z przykładowego kodu, możesz dodać ten 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;
}

Lub możesz użyć flexbox dla bardziej dynamicznego podejścia 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%; 
}

A jeśli chcesz być jeszcze bardziej wyszukany, spójrz na moją odpowiedź na to pytanie https://stackoverflow.com/a/52416148/1513083

Edytowałem twoje: 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%;}

Rozwiązaniem jest nadanie tagowi HTML 100% wysokości. Usunąłem również kontener div. Nie potrzebujesz go, gdy Twój układ pozostaje taki.

Chciałem skomentować @Ionica Bizau, ale nie mam wystarczającej reputacji.
Aby udzielić odpowiedzi na pytanie dotyczące kodu javascript:
Co musisz zrobić, to uzyskać wysokość elementu nadrzędnego (bez elementów zajmujących miejsce) i zastosować ją do elementów podrzędnych.

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

Okno notatek można zamienić na „.container”, jeśli nie ma pływających elementów potomnych lub ma poprawkę do obliczenia prawidłowej wysokości. To rozwiązanie wykorzystuje jQuery.

W przypadku Angular2 + Material2 + Sidenav musisz wykonać następujące czynności:

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

w moim przypadku height: 100vhnapraw problem tylko zgodnie z oczekiwanym zachowaniem

Wypróbuj to dla pionowego paska przewijania:

overflow-y:scroll;