Come dividere il 100% della pagina (non lo schermo) in altezza?

Sto tentando di utilizzare il CSS per creare un effetto "grigio" sulla mia pagina mentre una finestra di caricamento è visualizzata in primo piano mentre l'applicazione funziona. Ho fatto questo creando un div al nero traslucido al 100% di altezza/larghezza che ha la sua visibilità attivata/disattivata tramite javascript. Pensavo che sarebbe stato abbastanza semplice; tuttavia, quando il contenuto della pagina si espande al punto in cui lo schermo scorre, scorrendo verso il basso della pagina viene visualizzata una porzione che non è disattivata. In altre parole, il 100% dell'altezza del div sembra applicarsi alla dimensione del viewport del browser, non alle dimensioni effettive della pagina. Come posso espandere il div a coprire l'intero contenuto della pagina? Ho provato a usare JQuery .css ('height', '100%') prima di attivare la sua visibilità ma questo non cambia nulla.Come dividere il 100% della pagina (non lo schermo) in altezza?

Questo è il CSS del div in questione:

div.screenMask 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

Grazie.

fonte

2009-06-16 Lee D

dovrebbe funzionare per disabilitare per scorrere bar durante la visualizzazione si traslucido div grigio? Vuoi davvero che gli utenti siano in grado di scorrere verso il basso per vedere qualcosa che non possono fare nulla in ogni caso? – Adam

Se si modifica position: absolute a position: fixed, funzionerà in tutti i browser eccetto IE6. Questo risolve il div nel viewport, quindi non si sposta fuori dalla vista durante lo scorrimento.

È possibile utilizzare $(document).height() in jQuery per farlo funzionare anche in IE6. Per esempio.

$('.screenMask').height($(document).height());

Questo sarebbe ovviamente risolvere il problema per tutti gli altri browser troppo, ma io non preferisco usare JavaScript se posso evitarlo. Dovresti fare la stessa cosa anche per la larghezza, in realtà, nel caso ci sia uno scorrimento orizzontale.

Ci sono anche plenty of hacks around to make fixed positioning work in IE6, ma tendono ad imporre qualche altra limitazione al tuo CSS, o usano JavaScript, quindi probabilmente non ne vale la pena.

Inoltre, presumo che tu abbia solo una di queste maschere, quindi ti suggerirei di usare un ID invece di una classe.

fonte

2009-06-16 20:02:59 mercator

Se la maschera viene mostrata con Javascript, cos'è più Javascript per risolvere il problema di altezza? –

Grazie, cambiare assoluto in fisso era tutto ciò che era necessario! Punto giusto anche sull'ID. –

@Lee: Eccellente ... @Paolo: Non è certo un problema qui, devo essere d'accordo. Ma anche se il supporto JS non è il problema, finisci per mescolare stile e comportamento e potresti anche (leggermente) influenzare le prestazioni. E Lee ha anche risposto alla tua domanda. La soluzione JavaScript non era effettivamente necessaria in questo caso. – mercator

Se si utilizza jQuery per impostare l'altezza prima della comparsa Sto indovinando che è OK per aggiungere un po 'di javascript :)

È possibile impostare l'altezza del div al scrollHeight di document.body - in questo modo dovrebbe coprire tutto il corpo. È necessario aggiungere alcuni trucchi extra per assicurarsi che continui a coprire il corpo nel caso in cui qualcosa al di sotto decide di crescere però.

fonte

2009-06-16 20:05:47 ylebre

div.screenMask 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

Impostando tutti top, bottom, left, e right, l'altezza e la larghezza sono calcolati automaticamente. Se screenMask è un elemento secondario diretto dell'elemento <body> e il modello di box standard è in vigore (cioè la modalità di quirk non è stata attivata), questo coprirà l'intera pagina.

fonte

2009-06-16 20:26:26

Non hai bisogno di usare 'position: fixed' per impedire a div.screenMask di scorrere, se la pagina sottostante è più alta di una viewport-height? –

Questo non funziona affatto in IE6. In altri browser ha bisogno di una posizione: relativa sul corpo per funzionare, e anche in quel caso funziona solo sullo scrolling verticale, non sullo scrolling orizzontale. – mercator

Mi rendo conto che sto rispondendo a lungo, molto tempo dopo che è stato chiesto, ma sono atterrato qui dopo essere stato brevemente inciampato da questo problema, e nessuna delle risposte attuali è corretta.

Ecco la risposta giusta:

body { 
    position: relative; 
}

Questo è tutto! Ora il tuo elemento sarà posizionato rispetto a <body> invece che al viewport.

Non vorrei preoccuparmi di position: fixed, poiché il supporto del browser rimane discutibile.Safari prima di iOS 5 non lo supportava affatto.

Si noti che l'elemento <div> coprirà il riquadro di confine <body> (casella + padding + bordo), ma non coprirà il margine. Compensare impostando posizioni negative sul tuo <div> (ad esempio top: -20px) o rimuovendo il margine di <body>.

Si consiglia inoltre di impostare <body> su height: 100% per garantire che non si finisca mai con una finestra parzialmente mascherata su una pagina più corta.

Due punti validi presi da risposte precedenti. Come dice Ben Blank, puoi perdere le dichiarazioni width e height, posizionando invece tutti e quattro gli angoli. E Mercator ha ragione che dovresti usare un ID invece di una classe per un singolo elemento così importante.

Questo lascia il seguente consigliata completa CSS:

body { 
    position: relative; 
    margin: 0; 
} 

#screenMask { 
    position: absolute; 
    left: 0; right: 0; 
    top: 0; bottom: 0; 
    z-index: 1000; 
    background-color: #000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

E HTML:

<body> 
    <div id="screenMask"></div> 
</body>

Spero che questo aiuti qualcun altro!

fonte

2012-08-16 03:32:34

+1, tuttavia sottolineo che anche questo è un approccio discutibile quando la modifica della posizione del contenitore a scorrimento in relazione può avere conseguenze impreviste. Fortunatamente per me, oggi, il mio contenitore a scorrimento è già posizionato relativo! Il trucco dell'uso di 'position: absolute' combinato con' left', 'right',' top' e 'bottom' è a volte un vero risparmiatore di vita, e sempre facile da dimenticare. –

Il posizionamento relativo a 'body' lo risolve quasi, ma impostare l'altezza del corpo al 100% non è una soluzione utile: mentre corregge le pagine che non riempiono la finestra, rompe quelle più grandi, cioè il corpo avrà solo l'altezza del viewport . Inoltre, impostare 'min-height: 100%' sul corpo sembra non fare nulla (Firefox). –

Se volete popup con effetto di sovrapposizione, allora è possibile utilizzare queste passo ..

<style> 
.overlay{ 
background:#000; 
opacity:0.5; 
position:fixed; 
z-index:1; 
width:100%; 
height:100%; 
} 
.popup{ 
width:500px; 
margin:auto; 
position:fixed; 
z-index:2; 
height:300px; 
} 
</style> 
<div class="overlay"></div> 
<div class="popup"> 
     Hello everyone 
</div>

fonte

2014-09-18 12:43:27

Come dividere il 100% della pagina (non lo schermo) in altezza?

risposta

Problemi correlati