Con assoluta, scorre ma non ottiene il 100% in altezza:Come rendere un div a schermo intero e scorrevole?
.class {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 1000000;
background: rgba(0, 0, 0, 0.9);
}
Con fisso, si arriva al 100% in altezza, ma non scorre
.class {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 1000000;
background: rgba(0, 0, 0, 0.9);
}
Vorrei evitare aggiungendo un'altezza fissa all'elemento figlio e rendendolo overflow: scroll
nel CSS con 'posizione: absolute', il contenitore con' .class' riempirà la schermo (o assumere le dimensioni del blocco antenato più vicino con posizionamento non statico). Se aggiungi abbastanza contenuto al contenitore, verrà visualizzata una barra di scorrimento verticale poiché il contenuto in eccesso attiverà una condizione di overflow (a meno che non imposti l'overflow su nascosto). Il colore di sfondo è dipinto sul contenitore '.class' e non si applica al contenuto straripante. Hai bisogno di un contenitore annidato per ovviare a questo problema. Si prega di commentare nel tuo post originale. –
@MarcAudet [gli elementi a livello di blocco hanno un overflow predefinito di 'overflow: visible;'] (http://www.w3.org/TR/CSS21/visufx.html#overflow), il che significa che non inizierà lo scorrimento per impostazione predefinita . Al contrario, si limiterà a sovrasfruttare il contenitore e a far scattare lo scroll sul contenitore padre più vicino che potrebbe arrivare fino al viewport. Ciò comporterà una casella che riempie l'altezza e la larghezza della finestra ma ha ancora il contenuto che deve scorrere dalla finestra. Il risultato non è carino: http://jsbin.com/docojuyedi/1 –