Div altezza automatica con overflow e scorrimento quando necessario

Question

Sto provando a creare un sito Web senza scorrimento verticale per una pagina, ma ho bisogno di uno dei DIV che devo espandere verticalmente nella parte inferiore della pagina (al massimo), e che quando ha contenuti che non si adattano, il div dovrebbe creare uno scroller verticale.

ho già il css per lo all'interno del del div individuato in this fiddle, creando lo scroller quando necessario. ho anche capito how to make che il contenitore div cresce per occupare esattamente lo spazio verticale che ha nella pagina. Non riesco a farli funzionare insieme!

Si prega di tenere presente che in jsfiddle non sarà possibile visualizzare il contenuto dell'intero sito Web e in questo senso ciò che si ottiene per il secondo violino non mostra realmente cosa si sta facendo, ma funziona come inteso però.

solo un'altra nota: poiché sono diversi giochini, il contenitore id # id nel primo violino è id # dcontent div del 2o esempio.

c'è un'altra cosa: per un tipo di contenuto, questo div scorrerà verticalmente, ma per altro tipo di contenuto, lo voglio scorrere orizzontalmente, poiché avrà un "cursore" di prodotto che mostra gli elementi orizzontalmente all'interno di questo DIV.

si prega di guardare anche questa foto perché potrebbe essere più facile da capire quello che sto cercando di dire: PICTURE

ho provato a guardare ad altre domande relative a questi argomenti, ma nessuno sembrava di coprire tutti gli aspetti i Sto cercando di risolvere ...: S

se c'è qualcos'altro che posso fornire per aiutarti/me :) capirlo, per favore fammi sapere!

grazie!

EDIT1: fisso errori di battitura

EDIT2: foto aggiunto per la spiegazione

Answer 1

Ebbene, dopo lunghe ricerche, ho trovato una soluzione che fa quello che mi serve: 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> 
</div> 

potrebbe non funzionare ancora con la cosa orizzontale, ma è un work in progress!

Fondamentalmente ho abbandonato il modello "inizio" scatole-dentro-scatole-dentro-scatole e ho usato il posizionamento fisso con le proprietà dinamiche di altezza e di trabocco.

Spero che questo possa aiutare chi troverà la domanda più tardi!

MODIFICA: questa è la risposta definitiva.

Answer 2

Prova questo:
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> 

Se non lo fai come il posizionamento assoluto in questo caso, è sufficiente giocare con wi a dividere un genitore e un bambino con questo, entrambi con position:relative.

EDIT: Qui di seguito dovrebbe funzionare (ho appena messo il CSS in linea per il momento):

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

Answer 3

Penso che sia abbastanza facile. basta usare questo css

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

dopo questo solo dare questa classe per ur div proprio come -

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

Answer 4

Questo è quello che sono riuscito a fare finora. Immagino che questo sia un po 'quello che stai cercando di tirare fuori. L'unica cosa è che non riesco ancora a assegnare l'altezza corretta al contenitore DIV.

->JSFIDDLE

Answer 5

risposta rapida con punti principali

praticamente la stessa risposta come la risposta migliore scelta da @Joum, per accelerare la vostra ricerca di cercare di ottenere la risposta alla pubblicato domanda e risparmiare tempo da decifrare che cosa sta succedendo nella sintassi -

risposta

Imposta l'attributo position su fixed, imposta gli attributi top e bottom a tuo piacimento per l'elemento o div che vuoi avere una dimensione "automatica" rispetto all'elemento parent e quindi imposta overflow su hidden.

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

Wallah! Questo è tutto ciò di cui hai bisogno per il tuo elemento speciale che desideri avere un'altezza dinamica in base alle dimensioni dello schermo e ai contenuti dinamici in entrata pur mantenendo l'opportunità di scorrere.

Answer 6

Questa è una soluzione orizzontale con l'uso di FlexBox e senza il fastidioso posizionamento di absolute.

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>

Answer 7

Mi sorprende che nessuno ha menzionato calc() ancora.

Non sono riuscito a distinguere il caso specifico dai vostri violini, ma capisco il vostro problema: volete un contenitore height: 100% che può ancora usare overflow-y: auto.

Questo non funziona immediatamente perché overflow richiede un vincolo di dimensioni hardcoded per sapere quando deve iniziare a gestire l'overflow. Quindi, se sei andato con height: 100px, funzionerebbe come previsto.

La buona notizia è that calc() can help, ma non è semplice come height: 100%.

calc() consente di combinare unità di misura arbitrarie.

Così, per la situazione che descrivi nella foto si includono:

Dal momento che tutti gli elementi sopra e sotto il div rosa sono di altezza nota (diciamo, 200px in altezza totale), è possibile utilizzare calc per determinare l'altezza del mignolo ole:

height: calc(100vh - 200px);

o, 'altezza è 100% della 200px vista altezza meno.'

Quindi, overflow-y: auto dovrebbe funzionare come un fascino.