2015-01-21 39 views
5

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

+0

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

+1

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

risposta

5

È necessario aggiungere overflow:auto in modo che scorre se il contenuto overflow del contenitore.

.class { 
    ... 
    overflow:auto; 
} 

http://jsbin.com/kuqaqumude/1/edit?html,css,output

Per maggiori dettagli riguardanti overflow: auto e overflow: visible,
vedi: http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping

+0

se aggiungo che al primo set di css dove uso assoluto, non funziona –

+0

e se il contenuto non ha un overflow del suo contenitore? Voglio che il contenitore sia pieno al 100% senza rigidità –

+1

@ rob.m [Funziona ancora] (http://jsbin.com/yekoxisulo/2/edit). Hai ancora bisogno di 'width: 100%; height: 100% ' –

3

Quindi, prima di tutto, se si desidera avere il 100% di altezza e larghezza, sarà necessario definire CHE COSA sia. Quindi devi dire al corpo/html che la dimensione che hanno è 100% larghezza/altezza.

Ora non si vuole lasciare che la pagina di scorrimento verso il basso, se il testo va fuori del div, perché vedrete uno spazio bianco se lo fai. Quindi imposta overflow-y per scorrere, quindi scorrerà all'interno del div e non nel documento stesso.

html,body{ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.fullwidth{ 
    width:100%; 
    height: 100%; 
    background-color: red; 
    overflow-y: scroll; 
} 

Ecco un violino di lavoro:

WORKING FIDDLE

Problemi correlati