come riempire div a piena altezza della pagina in css? (la pagina è più alta del 100%) per ajax che carica lo sfondo gif

Question

ok ci sono diverse domande simili ma non proprio nulla che voglio.

Ho poche richieste di ajax sulla pagina e voglio mostrare l'immagine al centro dello schermo, e tutto funziona OK.

Solo per far sembrare più prominente, ho voluto posizionare quell'immagine su un div con sfondo traslucido, quindi è più evidente per gli utenti finali. Ora viene la parte difficile.

ho fatto il div con css come questo:

.divLoadingBackground 
    { 
     filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4; 
     width: 100%; 
     height: 100%; 
     background-color: #333; 
     position: fixed; 
     top: 0px; 
     left: 0px; 
    } 

Questa riempie la pagina in alto va bene, o, dovrei dire, questo riempie la finestra. Se faccio scorrere la pagina verso il basso, la pagina è di nuovo normale. Voglio che questo div divida l'INTERA LUNGHEZZA della pagina, indipendentemente dalla lunghezza della pagina.

Ecco un esempio mockup del problema che ho fatto per dimostrare rapidamente:

Come potete vedere, ho preso l'esempio del SO per il mockup;) immagine 1 mostra che il suo bene quando sembra. l'immagine 2 mostra che sale con la pagina su scroll. Sono uno sviluppatore C# e il css mi è estraneo quanto il latino antico.

Come rendere questo div divaradingBackground div per riempire l'intera lunghezza della pagina?

Molte grazie per qualsiasi aiuto. Se avete bisogno di ulteriori informazioni, si prega di commentare!

Answer 1

Una cosa che non vedo nel tuo css è z-index. Risolto, anche se, risolve questo problema, a volte, in base a come sono posizionati altri div, il div divaradackground può finire in uno dei div.

prova ad aggiungere

z-index: 9999; 

o qualcosa di simile e vedere se funziona.

Answer 2

Credo che sia necessario JavaScript/jQuery per impostare dinamicamente l'altezza del div in questione all'altezza della pagina una volta renderizzata.

E se stai entrando nel mondo del web, è il momento di imparare che la nuova lingua "CSS" e il perpah non è un vero e proprio scoraggiante JavaScript.

Answer 3

Quando ho avuto bisogno di una tale funzionalità alcuni anni fa, ho esaminato come lo ha fatto Google Calendar.

In pratica, utilizzano un file JavaScript basato su timer che controlla l'altezza della finestra e regola di conseguenza l'altezza di un tag DIV contenuto (o di un tag IFRAME, qualsiasi tag contenitore desiderato).

Ecco un frammento di codice da una pagina ho lavorato:

<script type="text/javascript"> 
    document.getElementsByTagName("body")[0].style.height = "100%"; 
    document.getElementsByTagName("html")[0].style.height = "100%"; 
    document.getElementsByTagName("body")[0].style.minHeight = "100%"; 
    document.getElementsByTagName("html")[0].style.minHeight = "100%"; 

    function height() 
    { 
     try 
     { 
      height_iframe(); 
     } 
     catch(err) 
     { 
     } 
    } 
    window.onload=height; 

    // -- 

    var ie6WorkaroundIFrameResize = 1; 

    function height_iframe() 
    { 
     var any = false; 
     var offset = 300; 
     var c = document.getElementById("iframecontent"); 

     if (c!=null) 
     { 
      c.style.height = (GetClientHeight()-offset)+"px"; 
      any = true; 

      var d = document.getElementById("iframeie6"); 
      if (d!=null) 
      { 
       d.style.height = (GetClientHeight()-(offset+ie6WorkaroundIFrameResize))+"px"; 
       any = true; 

       ie6WorkaroundIFrameResize = 0; 
      } 
     } 

     if (any) 
     {                    
      setTimeout('height_iframe()', 300); 
     } 
    } 

    function GetClientHeight() 
    { 
     return document.documentElement.clientHeight; 
    } 
</script> 

In sostanza, lo script controlla regolarmente per l'altezza della finestra tramite la funzione GetClientHeight() e regola l'elemento di preoccupazione ("iframecontent") di conseguenza.

Sottraggo alcuni offset di intestazioni e piè di pagina a altezza fissa.

Answer 4

AFAIK è necessario impostare le dimensioni di questo div tramite javascript. Ti consiglio di utilizzare jQuery, in questo modo:

//$(document).height() gives the size of the document 
//(as opposed to $(window).height() that would give the size of the viewport 
$("div#overlay").css('height',$(document).height()); 

Answer 5

avrebbe messo questo in un commento, ma sembra non ho troppo bassa rep di commentare.

Dove si trova il div .divLoadingBackground nell'albero DOM? Poiché ha una posizione fissa, non dovrebbe scorrere con la pagina. Questo mi fa credere che l'elemento sia troppo profondamente annidato. Prova a metterlo a destra nel livello del corpo della pagina e vedere se questo aiuta.

Inoltre, sei sicuro che qualche altra direttiva css non stia cambiando l'attributo position in assoluto o qualcosa del genere?

Inoltre, assicurarsi di utilizzare il diritto DOCTYPE. Ciò ha un certo impatto sugli elementi di posizione fissa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

Oh, e naturalmente, la posizione fissa non è supportata in IE6 e seguenti.