Spiegazione - Il problema del footer

[fiber81]

Sto guardando l'esempio su html per allineare il footer al bottom della pagina in modo che questa sia alta il 100%.

Questo è il codice, non capisco però una cosa, cioè la differenza tra div#container e body>div#container. Perchè il contenuto di body>div#container non è incluso direttamente nel primo?
Grazie

html,body{margin:0; padding: 0;height: 100%}
div#container{position: relative; height:100%}
body>div#container{height: auto; min-height: 100%}
div#content{padding: 0 1.5em 5em}
div#footer{position:absolute;bottom: 0;width: 100%}

[thomas_anderson]

ciao!
tu hai una pagina la cui altezza minima è stata dichiarata come 100%. ciò significa che tu hai detto al browser: usa tutta l'altezza e non basarti solo sul contenuto. in questo modo il browser userà tutto lo spazio verticale. il footer viene posizionato in modo assoluto in fondo alla pagina. per far questo bisogna che la pagina abbia un altezza dichiarata. esempio:

|
|
|  ^   100%
|   |
|   
|qui va il footer

il selettore del figlio (>) seleziona l'elemento div che è figlio di body. anche questo div ha altezza pari a 100% e 'position: relative'. quando usi questa dichiarazione, tu crei un nuovo contesto di posizionamento per gli elementi, che faranno riferimento all'elemento con 'position: relative' e non alla finestra del browser. l'uso del selettore figlio qui serve solo ai browser standard. IE6 interpreta già 'height' come se fosse 'min-height'. 'height: auto' qui significa: io non ti do un'altezza esplicita, allora tu prendi quella del tuo genitore (cioè body).