100% per più div

Question

solito ho la mia struttura disposte qualcosa di simile:

<div id="all"> 
    <div id="page"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
    </div> 
</div> 

Qualora l'organismo terrà un motivo di sfondo, "tutti" terrà una dropshadow per la pagina di andare su e giù e la "pagina" può avere spesso anche uno sfondo ripetitivo.

ho provato variazioni sull'uso dei css proprietà altezza/min-height:

html, body { 
    height:100%; 
    ... 
} 
#all { 
    height:100%; 
    min-height:100%; 
} 
#page { 
    height:100%; 
    min-height:100%; 
    height:auto !important; 
} 

Sembra come se tolgo height: auto da "tutti", allora sembra che funziona fino a quando scorre, poi dopo la pergamena sfondo per tutti sparisce

example

Tuttavia, se io continuo l'altezza: auto là allora ottengo il problema dello sfondo per la pagina non funziona

example

Speriamo che qualcuno conosca una soluzione?

Answer 1

Bene, ecco cosa ho finito con la CSS:

html, body { 
    height:100%; /* IE6: treaded as min-height*/ 
    margin: 0; 
    padding: 0; 
} 
body { 
    margin: 0; 
    padding: 0; 
    color: #494949; 
    text-align: center; 
    background-color: #3f91a7; 
    background-image: url(images/bg_body.jpg); 
    background-repeat: repeat-x; 
    background-position: center top; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
} 
#all { 
    margin: 0px; 
    padding: 0px; 
    height:100%; /* IE6: treaded as min-height*/ 
    min-height:100%; /* real browsers */ 
    height:auto !important; 
    background-image: url(images/bg_all.png); 
    background-repeat: repeat-y; 
    background-position: center top; 
    overflow: hidden; 
} 
#page { 
    width: 993px; 
    padding: 0 0 10000px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: -10000px; 
    margin-left: auto; 
    text-align: left; 
    background-color: #FFF; 
    background-image: url(images/bg_page.jpg); 
    background-position: center top; 
    background-repeat: repeat-y; 
    height:100%; /* IE6: treaded as min-height*/ 
    min-height:100%; /* real browsers */ 
    height:auto !important; 
} 
#header, #footer { 
    text-align: center; 
    font-size: 16px; 
    padding: 20px; 
} 
#content { 
    padding: 25px; 
} 

non ho avuto la possibilità di provarlo in qualcosa di diverso da Firefox, ma, hoipefully vi darà un buon inizio.

Answer 2

Hai provato:

html, 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
#all { 
    min-height: 100%; 
} 

? Solo per IE 6, dovresti impostare height: 100%; per #all (perché interpreta fondamentalmente come min-height (come risultato di un bug). Come IE6 non capisce l'attributo min-height, l'altezza diventa effettivamente una sostituzione per min -altezza).

Se si imposta height: 100%; per altri browser, lo prenderanno come altezza 100% della vista, non il 100% della pagina, quindi lo scorrimento non funzionerà correttamente.

Il mio commento sul downvote:

È ormai chiaro, che la mia risposta non risolve tutto il problema. Quello che abbiamo qui sembra essere un caso abbastanza complesso - almeno nessuno qui sembra aver trovato una risposta ancora? Ho anche esaminato l'eccellente libro (tedesco) di Ingo Chao, che giunge alla stessa conclusione: l'impostazione dell'altezza del genitore non funzionerà, e l'impostazione dell'altezza del bambino non funzionerà, se l'altezza del genitore non fosse impostata in modo esplicito, ma piuttosto dinamicamente dalla dimensione del contenuto.

Ma la mia risposta potrebbe ancora contribuire a limitare le possibilità un po '- perché l'impostazione height su #all molto probabilmente non funziona su qualsiasi browser tranne IE 6. Se non siete d'accordo, si prega di inviare un commento, perché in tal caso, Mi piacerebbe anche saperne di più su questo.

Answer 3

Ecco cosa sta succedendo: è stato impostato html & body di avere un'altezza di 100%, ma che il 100% è l'altezza della finestra, non il documento. Poiché l'altezza di #all è impostata su 100%, è impostata al 100% dell'altezza del genitore, che è il corpo, che è impostato al 100% dell'altezza della finestra. Tutto sta ereditando l'altezza della finestra.

Il modo per risolvere questo problema è in realtà lo stesso modo in cui è possibile correggere i galleggianti che dispongono di un contenitore esterno. Tutto quello che devi fare è inserire overflow:auto; su #all. Non hai nemmeno bisogno di dichiarazioni di altezza su nessun altro elemento e potresti essere in grado di eliminare sia il #all sia il #page div.

Maggiori informazioni qui: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Answer 4

vorrei solo capovolgere la posizione del div # tutti e div # pagina ...

<div id="page"> 
    <div id="all"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
    </div> 
</div> 

Answer 5

Hai provato questo:

function getWindowHeight() { 
       var windowHeight = 0; 
       if (typeof(window.innerHeight) == 'number') { 
        windowHeight = window.innerHeight; 
       } 
       else { 
        if (document.documentElement && document.documentElement.clientHeight) { 
         windowHeight = document.documentElement.clientHeight; 
        } 
        else { 
         if (document.body && document.body.clientHeight) { 
          windowHeight = document.body.clientHeight; 
         } 
        } 
       } 
       return windowHeight; 
      } 


window.onload = init; 



function init(){ 
document.getElementByID("all").style.height = getWindowHeight() + "px"; 

    } 

Oppure inserisci page anziché all

Answer 6

Questo wo rked per me:

#page { 
    width: 993px; 
    padding: 0px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    text-align: left; 
    background-color: #FFF; 
    background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg); 
    background-position: center top; 
    background-repeat: repeat-y; 
    /* height:100%; IE6: treaded as min-height*/ 
    height: expression(document.body.offsetHeight); /* sets min-height for IE */ 
    overflow: auto; 
    min-height:100%; /* real browsers */ 
    /* height:auto !important; */ 
} 

Answer 7

Dimenticate il 100% dei div, prova a spostare l'immagine di sfondo per l'elemento HTML e l'altezza confine completo al corpo.

html { 
    height:100%; 
    background-color: blue; 
} 
body { 
    margin: auto auto; 
    padding: 0; 
    color: #494949; 
    /*min-height: 100%; */ 
    height:100%; /*for ie6*/ 
    border-left:solid 2px red; 
    border-right:solid 2px red; 
    background-color:#fff; 
    width: 960px; 
} 

Answer 8

Sebbene la domanda fosse stata postata alcuni anni fa, mi sono imbattuto nella stessa sfida e ho trovato questo thread precedente oggi. Anche se a mio avviso ci potrebbero essere soluzioni più belle ormai, ho voluto condividere quello che ho trovato oggi, tuttavia.

Aveva lo stesso problema, lo sfondo 1 a schermo intero, adattivo e completamente al di sotto di tutto il resto e un altro ripetibile (-y) sfondo numero 2 dovrebbe andare in cima, ma non scorrere fuori vista perché era impostato per seguire l'altezza di la finestra che è stato dato al particolare div che detiene sfondo 2.

Cominciamo con i div che ho creato:

<div id="full_background"> 
    <img src="images/bkg_main.jpg" alt="" /> 
    <div id="absolute">Contains background set to repeat-y</div> 
    <div id="content">Contains the content</div> 
</div> 

il css si presenta così:

* { margin: 0px; padding: 0px; } 
html { height: 100%; } 
body { height: 100%; } 

#full_background { width: 100%; min-height: 100%; position: relative; float: left; } 
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; } 
#full_background>div { position: relative; z-index: 2; } 

#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; } 

#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; } 

Prima di tutto, ho aggiunto uno schermo intero & ridimensionando l'immagine di sfondo al mio sito (utilizzando il div full_background e il tag img) utilizzando la seguente soluzione (soluzione css molto semplice che funziona come un fascino in ogni browser e versioni più vecchie fino a per esempio IE7) - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html> vedi ultima risposta da aj_nsc

Successivamente, utilizzando il seguente metodo jQuery - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - ho creato un div con id = assoluta, che è dato alla stessa altezza della finestra del browser (anche sul ridimensionamento) . Ho inserito il mio numero di sfondo ripetuto (-y) qui. Impostare questo div in posizione: fisso e rimarrà inserito quando si scorre il div con il contenuto.

Quindi sotto questo div si inserisce il div con il contenuto, che si espande liberamente verso il basso oltre la finestra del browser.

Durante lo scorrimento, i due sfondi continueranno a riempire l'intera area della finestra del browser (anche verticalmente) in ogni momento e rimarranno, con il contenuto che scorre su e giù su di essi. In questo modo, al ridimensionamento, ci si assicura anche che entrambi gli sfondi continuino a riempire l'intera area di sfondo in ogni momento.

Ho provato questa soluzione in CH, FF, IE7-9 e Safari e ha funzionato in tutti senza alcun problema.