it-swarm.com.de

Überlauf Scroll CSS funktioniert nicht in der Div

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 einen Wrapper Div enthalten,

Ich brauche eine vertikale Bildlaufleiste in der Wrapper Div. Die Höhe sollte automatisch oder 100% basierend auf dem Inhalt sein.

Die Kopfzeile sollte repariert sein und ich möchte keine allgemeine Bildlaufleiste, also habe ich overflow:hidden im Body-Tag,

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

87
user2493730

Ihnen fehlt die CSS-Eigenschaft height.

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 [~ # ~]

Von Dokumentation :

overflow-y

Die CSS-Eigenschaft overflow-y gibt an, ob Inhalt abgeschnitten, eine Bildlaufleiste gerendert oder der Überlaufinhalt eines Elements auf Blockebene angezeigt werden soll, wenn er am oberen und unteren Rand überläuft.

125
Ionică Bizău

Wenn Sie die Höhe in der Klasse .wrapper Hinzufügen, funktioniert der Bildlauf, ohne dass der Bildlauf height nicht funktioniert.

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

CSS:

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

Die Lösung besteht darin, height:100%; an alle übergeordneten Elemente Ihres .wrapper-div auch. Damit:

html{
    height: 100%;
}

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

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

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

6
LinkinTED

Ich habe dein bearbeitet: 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%;}

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.

4
LinkinTED

Wenn Sie für Ihren Header eine statische Höhe festlegen, können Sie diese für die Berechnung der 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 einen dynamischeren 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, werfen Sie einen Blick auf meine Antwort auf diese Frage https://stackoverflow.com/a/52416148/151308

3
AKrush95

Ich wollte @Ionica Bizau kommentieren, habe aber keinen ausreichenden Ruf.
Um eine Antwort auf Ihre Frage zum Javascript-Code zu geben:
Sie müssen lediglich die Elementhöhe des übergeordneten Elements (abzüglich aller Elemente, die Speicherplatz beanspruchen) ermitteln und diese auf die untergeordneten Elemente anwenden.

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

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

1
Anima-t3d

Für Angular2 + Material2 + Sidenav müssen Sie folgende Schritte ausführen:

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

Versuchen Sie dies für eine vertikale Bildlaufleiste:

overflow-y:scroll;
0
Marc Lloyd