Ich suche nach einer CSS / Javascript-Lösung für mein Problem mit dem Scrollen von HTML-Seiten.

Ich habe drei Divs, die ein Div, einen Header und ein Wrapper-Div enthalten.

Ich benötige eine vertikale Bildlaufleiste im Wrapper-Bereich. Die Höhe sollte automatisch oder 100% sein, je nach Inhalt.

Die Kopfzeile sollte fixiert sein, und ich möchte keine allgemeine Bildlaufleiste, die ich overflow:hiddenim Body-Tag angegeben habe.

Ich brauche eine vertikale Bildlaufleiste in meinem Wrapper Div. Wie kann ich das beheben?

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

Bitte beziehen Sie sich auf diese JS Fiddle

Ihnen fehlt die heightCSS-Eigenschaft.

Wenn Sie es hinzufügen, werden Sie feststellen, dass die Bildlaufleiste angezeigt wird.

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

JSFIDDLE

Aus der Dokumentation :

overflow-y

Die CSS-Eigenschaft overflow-y gibt an, ob Inhalte abgeschnitten, eine Bildlaufleiste gerendert oder Überlaufinhalte eines Elements auf Blockebene angezeigt werden sollen, wenn es am oberen und unteren Rand überläuft.

Die Lösung besteht darin height:100%;, alle übergeordneten Elemente von Ihnen hinzuzufügen .wrapper-div. So:

html{
    height: 100%;
}

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

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

Wenn Sie in der .wrapperKlasse Höhe hinzufügen, funktioniert Ihre Schriftrolle, ohne dass die heightSchriftrolle nicht funktioniert.

Versuchen Sie dies http://jsfiddle.net/ZcrFr/3/

CSS:

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

Du hast dem Div keine Höhe gegeben. Es wird also automatisch gedehnt, wenn mehr Inhalt hinzugefügt wird. Geben Sie eine feste Höhe ein und die Bildlaufleisten werden angezeigt.

Wenn Sie eine statische Höhe für Ihren Header festlegen, können Sie diese in einer Berechnung für die Größe Ihres Wrappers verwenden.

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

Mit Ihrem Beispielcode können Sie dieses CSS hinzufügen:

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

Oder Sie können Flexbox für eine dynamischere Ansatz verwenden 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%; 
}

Und wenn Sie noch schicker werden möchten, schauen Sie sich meine Antwort auf diese Frage an: https://stackoverflow.com/a/52416148/1513083

Ich habe deine bearbeitet: Geige

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

Die Lösung besteht darin, dem HTML-Tag eine Höhe von 100% zu geben. Ich habe auch den Container div gelöscht. Sie brauchen es nicht, wenn Ihr Layout so bleibt.

Ich wollte @Ionica Bizau kommentieren, habe aber nicht genug Ruf.
So beantworten
Sie Ihre Frage zum Javascript-Code: Sie müssen lediglich die Elementhöhe des übergeordneten Elements (abzüglich aller Elemente, die Platz beanspruchen) ermitteln und auf die untergeordneten Elemente anwenden.

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

Das
Hinweisfenster könnte durch ".container" ersetzt werden, wenn dieses Fenster keine schwebenden Kinder hat oder einen Fix hat, um die richtige Höhe zu berechnen. Diese Lösung verwendet jQuery.

Für Angular2 + Material2 + Sidenav müssen Sie Folgendes tun:

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

height: 100vhBeheben Sie in meinem Fall das Problem nur mit dem erwarteten Verhalten

Versuchen Sie dies für eine vertikale Bildlaufleiste:

overflow-y:scroll;