Auto hoogte div met overloop en scroll indien nodig

Ik probeer een website te maken zonder verticaal scrollen voor een pagina, maar ik heb een van de DIV’s nodig die ik verticaal moet uitbreiden naar de onderkant van de pagina (maximaal), en dat wanneer het inhoud heeft die niet past, moet de div een verticale scroller maken.

ik heb de css voor de binnenkantvan de div al bedacht in deze viool, het maken van de scroller wanneer nodig. ik heb ook bedacht hoe jede container-div kunt laten groeien om precies de verticale ruimte in te nemen die het op de pagina heeft. ik kan ze gewoon niet samen laten werken!

Houd er rekening mee dat je in jsfiddle niet de inhoud van de hele website kunt zien en in die zin laat wat je voor de 2e viool krijgt niet echt zien wat er wordt gedaan, maar het werkt zoals ik het bedoeld had hoewel.

nog een opmerking: aangezien het verschillende violen zijn, is de id#container div in de 1e viool de id#dcontent div van het 2e voorbeeld.

er is nog iets: voor een bepaald type inhoud zal deze div verticaal scrollen, maar voor een ander type inhoud wil ik dat het horizontaal scrollt, omdat het een product-schuif zal hebben die elementen horizontaal in deze DIV weergeeft .

bekijk ook deze foto, want dan is het misschien makkelijker te begrijpen wat ik probeer te zeggen: BEELD

ik heb geprobeerd naar andere vragen over deze onderwerpen te kijken, maar geen enkele leek alle aspecten te dekken die ik probeer op te lossen… :S

Als er iets anders is dat ik kan bieden om jou / mij te helpen 🙂 om het uit te zoeken, laat het me dan weten!

bedankt!

EDIT1: typfouten gecorrigeerd

EDIT2: foto toegevoegd voor uitleg

Antwoord 1, autoriteit 100%

Het verbaast me dat nog niemand calc()heeft genoemd.

Ik heb uw specifieke geval niet kunnen onderscheiden van uw viool, maar ik begrijp uw probleem: u wilt een container height: 100%die nog steeds overflow-y: auto.

Dit werkt niet standaard omdat overfloween hardgecodeerde groottebeperking vereist om te weten wanneer het overflow moet gaan verwerken. Dus als je voor height: 100pxzou gaan, zou het werken zoals verwacht.

Het goede nieuws is dat calc()kan helpen, maar het is niet zo simpel als height: 100%.

calc()laat je willekeurige maateenheden combineren.

Dus voor de situatie die je op de foto beschrijft, voeg je:

Aangezien alle elementen boven en onder de roze div een bekende hoogte hebben (laten we zeggen, 200pxin totale hoogte), kun je calcgebruiken om de hoogte te bepalen van ole pinky:

height: calc(100vh - 200px);

of, ‘hoogte is 100% van de weergavehoogte minus 200px.’

Dan zou overflow-y: autoals een zonnetje moeten werken.

Antwoord 2, autoriteit 40%

Nou, na lang onderzoek heb ik een oplossing gevonden die doet wat ik nodig heb:
http://jsfiddle.net/CqB3d/25/

CSS:

body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
}
#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
    position: absolute; 
    top: 0;   
    width: 800px; 
    height: 100px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white; 
}
#framecontentBottom{
    top: auto;
    bottom: 0; 
    height: 110px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
}
#maincontent{
    position: fixed; 
    top: 100px; /*Set top value to HeightOfTopFrameDiv*/
    margin-left:auto;
    margin-right: auto;
    bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
    overflow: auto; 
    background: #fff;
    width: 800px;
}
.innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
    padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}
* html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 800px; 
}

HTML:

<div id="framecontentBottom">
    <div class="innertube">
        <h3>Sample text here</h3>
    </div>
</div>
<div id="maincontent">
    <div class="innertube">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
    </div>
</div>

werkt misschien nog niet met het horizontale ding, maar het is een werk in uitvoering!

Ik heb in feite het “inception” boxes-inside-boxes-inside-boxes-model laten vallen en vaste positionering met dynamische hoogte- en overloopeigenschappen gebruikt.

Ik hoop dat dit kan helpen wie de vraag later vindt!

EDIT: dit is het laatste antwoord.

Antwoord 3, autoriteit 28%

Snel antwoord met hoofdpunten

Vrijwel hetzelfde antwoord als het best gekozen antwoord van @Joum, om uw zoektocht naar het antwoord op de geposte vraag te versnellen en tijd te besparen bij het ontcijferen van wat er in de syntaxis gebeurt —

Antwoord

Stel position-attribuut in op vast, stel de top- en bottom-attributen naar wens in voor het element of de div waarvan u een “auto”-grootte wilt hebben in vergelijking met het bovenliggende element en stel vervolgens overflow in op verborgen.

>

.YourClass && || #YourId{
   position:fixed;
   top:10px;
   bottom:10px;
   width:100%; //Do not forget width
   overflow-y:auto;
}

Wallah! Dit is alles wat je nodig hebt voor je speciale element dat je een dynamische hoogte wilt hebben in overeenstemming met de schermgrootte en/of dynamische binnenkomende inhoud, terwijl je de mogelijkheid behoudt om te scrollen.

Antwoord 4, autoriteit 6%

Je kunt dit gewoondoen met flexboxenen overfloweigenschap.

Zelfs als de lengte van de ouder ook wordt berekend.

Zie dit antwoordof JSFiddlevoor details.

Antwoord 5, autoriteit 2%

Probeer dit:
CSS:

#content {
  margin: 0 auto;
  border: 1px solid red;
  width:800px;
  position:absolute;
  bottom:0px;
  top:0px;
  overflow:auto
}

HTML:

<body>
<div id="content">
...content goes here...
</div>
<body>

Als je in dit geval niet van absolute positionering houdt, kun je spelen met het maken van een parent- en child-div naar deze, beide met position:relative.

EDIT: hieronder zou moeten werken (ik heb de css even inline gezet):

<div style="margin:0 auto; width:800px; height:100%; overflow:hidden">
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto">
...content goes here...
</div>
</div>

Antwoord 6, autoriteit 2%

Dit is een horizontale oplossing met gebruik van FlexBox en zonder de vervelende absolutepositionering.

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: row;
}
#left,
#right {
  flex-grow: 1;
}
#left {
  background-color: lightgrey;
  flex-basis: 33%;
  flex-shrink: 0;
}
#right {
  background-color: aliceblue;
  display: flex;
  flex-direction: row;
  flex-basis: 66%;
  overflow: scroll;   /* other browsers */
  overflow: overlay;  /* Chrome */
}
.item {
  width: 150px;
  background-color: darkseagreen;
  flex-shrink: 0;
  margin-left: 10px;
}

<html>
<body>
  <section id="left"></section>
  <section id="right">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </section>
</body>
</html>

<div id="container">
    <div id="header">HEADER</div>
    <div id="fixeddiv-top">FIXED DIV (TOP)</div>
    <div id="content-container">
        <div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
    </div>
    <div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>

html {
    height:100%;
}
body {
    height:100%;
    margin:0;
    padding:0;
}
#container {
    width:600px;
    height:50%;
    text-align:center;
    display:block;
    position:relative;
}
#header {
    background:#069;
    text-align:center;
    width:100%;
    height:80px;
}
#fixeddiv-top {
    background:#AAA;
    text-align:center;
    width:100%;
    height:20px;
}
#content-container {
    height:100%;
}
#content {
    text-align:center;
    height:100%;
    background:#F00;
    margin:0 auto;
    overflow:auto;
}
#fixeddiv-bottom {
    background:#AAA;
    text-align:center;
    width:100%;
    height:20px;
}

.content {
   height: auto;
   max-height: 785px;
   overflow-y: auto;
}

.content {
   width: 100%;
   height:(what u wanna give);
   float: left;
   position: fixed;
   overflow: auto;
   overflow-y: auto;
   overflow-x: none;
}

<div class="content">your stuff goes in...</div>