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

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

Ho un div di posizione fissa sul lato sinistro dello scorrimento per un menu. Il lato destro è un div standard che scorre correttamente. Il problema è che quando la porta di visualizzazione del browser è troppo piccola per vedere l'intero menu .. non c'è modo di farlo scorrere che riesco a 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 altezza minima: 100% e posizione: fissa .. entrambi gli attributi che devo mantenere.

Il div contenente il menu è all'interno di un altro div wrapper che è posizionato in modo assoluto e l'altezza è impostata al 100%.

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

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

Qualche soluzione? Forse è necessario JavaScript? (di cui ne so poco)

Esempio di violino JS

e il codice pertinente che sta causando il problema (dal momento che pubblicare tutto qui è troppo lungo):

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

Ho anche provato ad aggiungere l'altezza: anche il 100% solo per vedere se quello era un problema, ma non funzionava neanche ... né un'altezza fissa, come 600px.

Il problema con l'utilizzo height:100%è che sarà il 100% della pagina anziché il 100% della finestra (come probabilmente ti aspetteresti). Questo causerà il problema che stai vedendo, perché il contenuto non fisso è abbastanza lungo da includere il contenuto fisso con un'altezza del 100% senza richiedere una barra di scorrimento. Il browser non sa / si preoccupa che non è possibile scorrere la barra verso il basso per vederlo

Puoi usare fixedper realizzare ciò che stai cercando di fare.

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

Questo fork del tuo violino mostra la mia correzione: http://jsfiddle.net/strider820/84AsW/1/

Ecco entrambe le soluzioni.

Innanzitutto, per quanto riguarda la barra laterale fissa, devi dargli un'altezza per poter 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 live: http://jsfiddle.net/RWxGX/3/

È impossibile NON 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 schermi di dimensioni ridotte, quindi non è necessario che appaia lo scorrimento.

Saluti, Ignacio

In generale, la sezione fissa dovrebbe essere impostata con width, heighte top, bottomproprietà, altrimenti non riconoscerà le sue dimensioni e posizione.

Se la casella usata è figlio diretto per il corpo e ha vicini, allora ha senso controllare z-indexe le top, leftproprietà, poiché potrebbero sovrapporsi, il che potrebbe influire sul passaggio del mouse durante lo scorrimento del contenuto.

Ecco la soluzione per una casella di contenuto (un figlio diretto del bodytag) che viene comunemente utilizzata insieme alla navigazione mobile.

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

Spero che aiuti qualcuno. Grazie!

Le soluzioni qui non hanno funzionato per me dato che sto progettando componenti reattivi.

Ciò che ha funzionato per la sidebar è stato

.sidebar{
position: sticky;
top: 0;
}

Spero che questo aiuti qualcuno.

Lasciando una risposta per chiunque cerchi di fare qualcosa di simile ma in direzione orizzontale , come volevo.

La risposta di Tweaking @ strider820 come di seguito farà la magia:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

Questo è tutto. Controlla anche questo commento in cui @train ha spiegato usando overflow:autoover overflow:scroll.