Avere un div di posizione fisso che deve scorrere se il contenuto trabocca

Question

In realtà ho due problemi, ma consente di risolvere prima il problema principale poiché ritengo che l'altro sia più facile da indirizzare.

Ho un div di posizione fisso sul lato sinistro della pergamena per un menu. Il lato destro è un div standard che scorre correttamente. Il problema è che quando il browser view-port è troppo piccolo per vedere l'intero menu .. non c'è modo di farlo scorrere che posso trovare (almeno non con css). Ho provato a usare diversi overflow in css, ma nulla fa scorrere il div. Il div che contiene il menu è impostato su min-height: 100% e position: fixed .. entrambi gli attributi che ho bisogno di mantenere.

Il div contenente il menu si trova all'interno di un altro div wrapper posizionato assolutamente e altezza impostata su 100%.

Come posso farlo scorrere verticalmente se il contenuto è troppo alto per il div?

Questo mi porta all'altro problema, che non voglio visualizzare una barra di scorrimento .. ma penso che potrei già avere una risposta (solo che non funziona ancora perché non riesco a ottenere il div per scorrere per iniziare).

Qualche soluzione? Forse javascript è necessario? (Di cui so poco)

JS Fiddle Example

e il relativo codice che causa il problema (in quanto la pubblicazione il tutto in qui è mooolto troppo lungo):

.fixed-content { 
    min-height:100%; 
    position:fixed; 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

provato anche l'aggiunta di altezza: 100% anche solo per vedere se quello era un problema ma non ha funzionato neanche ... né ha un'altezza fissa, come 600px.

Answer 1

So che questa è una vecchia questione, ma ho pensato che avrei buttare questa risposta là fuori.

Il problema con l'utilizzo di altezza: 100% è che sarà il 100% della pagina anziché il 100% della finestra (come probabilmente ti aspetteresti che sia). Ciò causerà il problema che stai vedendo, perché il contenuto non fisso è abbastanza lungo da includere il contenuto fisso con il 100% di altezza senza richiedere una barra di scorrimento.Il browser non conosce/cura che non puoi effettivamente scorrere quella barra verso il basso per vederlo

Tuttavia, poiché fisso ha le proprietà che lo fa, puoi farlo invece, e realizzare ciò che stai cercando di do:

.fixed-content { 
    top: 0; 
    bottom:0; 
    position:fixed; 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

Ecco un fork del vostro jsfiddle per mostrare il mio fix di lavoro: http://jsfiddle.net/strider820/84AsW/1/

Answer 2

Qui ci sono entrambe le correzioni.

In primo luogo, per quanto riguarda la barra laterale fissa, è necessario dare un'altezza per farlo traboccare:

codice HTML:

<div id="sidebar">Menu</div> 
<div id="content">Text</div> 

codice CSS:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;} 
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;} 
#content {width:80%; padding-left:20%;} 

@media screen and (max-height:200px){ 
    #sidebar {color:blue; font-size:50%;} 
} 

esempio dal vivo: http://jsfiddle.net/RWxGX/3/

È impossibile NON per ottenere una barra di scorrimento se il contenuto supera l'altezza del div. Ecco perché ho aggiunto una query multimediale per l'altezza dello schermo. Forse puoi regolare i tuoi stili per le dimensioni brevi dello schermo in modo che non sia necessario visualizzare lo scorrimento.

Cheers, Ignacio