Ik ben op zoek naar een CSS/Javascript-oplossing voor mijn probleem met het scrollen op HTML-pagina’s.

Ik heb drie div’s die een div, een header en een wrapper-div bevatten,

Ik heb een verticale schuifbalk nodig in de wrapper-div, de hoogte moet automatisch zijn of 100% op basis van de inhoud.

De koptekst moet worden aangepast en ik wil geen algemene schuifbalk, dus heb ik overflow:hiddenin de body-tag gegeven,

Ik heb een verticale schuifbalk nodig in mijn wrapper-div. Hoe kan ik dit oplossen?

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

Raadpleeg deze JS Fiddle

Antwoord 1, autoriteit 100%

Je mist de heightCSS-eigenschap.

Als je het toevoegt, zul je merken dat er een schuifbalk verschijnt.

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

JSFIDDLE

Van documentatie:

overflow-y

De CSS-eigenschap overflow-y geeft aan of inhoud moet worden geknipt, een schuifbalk moet worden weergegeven of overloopinhoud van een element op blokniveau moet worden weergegeven wanneer deze overloopt aan de boven- en onderrand.

Antwoord 2, autoriteit 28%

De oplossing is om height:100%;ook toe te voegen aan alle bovenliggende elementen van je .wrapper-div. Dus:

html{
    height: 100%;
}
body{ 
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}
#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}

Antwoord 3, autoriteit 16%

Als je hoogte toevoegt in de klasse .wrapper, werkt je scrollen, zonder heightwerkt scrollen niet.

Probeer dit eens
http://jsfiddle.net/ZcrFr/3/

CSS:

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

Antwoord 4, autoriteit 4%

Je hebt de div een hoogte niet gegeven. Dus het zal automatisch uitrekken wanneer er meer inhoud wordt toegevoegd.
Geef het een fix-hoogte en de schuifbalken verschijnen.

Antwoord 5, Autoriteit 3%

Als u een statische hoogte voor uw header instelt, kunt u dat gebruiken in een berekening voor de grootte van uw wikkel.

http://jsfidddle.net/ske5LQYV/5/

Uw voorbeeldcode gebruiken, kunt u deze CSS toevoegen:

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

Of, u kunt FlexBox gebruiken voor een dynamische benadering
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%; 
}

En als u zelfs fancier wilt, kijk dan eens naar mijn reactie op deze vraag
https://stackoverflow.com/a/52416148/1513083

Antwoord 6, Autoriteit 3%

in mijn geval lost alleen height: 100vhhet probleem op met het verwachte gedrag

Antwoord 7, autoriteit 3%

Ik heb je: Fiddle

bewerkt

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

De html-tag een hoogte van 100% geven is de oplossing.
Ik heb ook de container div verwijderd. Je hebt het niet nodig als je lay-out zo blijft.

Antwoord 8

Ik wilde reageren op @Ionica Bizau, maar ik heb niet genoeg reputatie.
Om een antwoord te geven op uw vraag over javascript-code:
Wat je moet doen is de hoogte van het bovenliggende element krijgen (minus eventuele elementen die ruimte innemen) en dat toepassen op de onderliggende elementen.

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

Opmerking
venster kan worden vervangen door “.container” als dat geen zwevende kinderen heeft of een oplossing heeft om de juiste hoogte te berekenen. Deze oplossing maakt gebruik van jQuery.

Antwoord 9

Deze oplossingen zijn allemaal goed , maar als u verticaal scrollen wilt toevoegen en de div-hoogte niet wilt wijzigen, kunt u margin-top:40px;zo gebruiken om alle dingen te nemen in positie en kan dus in container blijven en mooi scrollen
en werk de marge-topwaarde bij volgens uw vereisten.

bedankt

Antwoord 10

Voor Angular2 + Material2 + Sidenav moet u het volgende doen:

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

Antwoord 11

Probeer dit voor een verticale schuifbalk:

overflow-y:scroll;