Il modo più efficiente e compatibile per ottenere footer ancorato: html, css, sticky-footer

Sto provando a fare quanto segue in un modello CSS:

1. Aggancia il piè di pagina in basso quando non c'è abbastanza contenuto per riempi la pagina
2. Allunga lo sfondo dell'intestazione e del piè di pagina per l'intera larghezza
3. Posiziona tutto il contenuto al centro della pagina

Questo è il codice che ho, creato con l'aiuto qui: http://tinkerbin.com/lCNs7Upq

La mia domanda è, ho visto alcuni modi per raggiungere questo obiettivo. Questo è il migliore? Sembra un peccato dover avere anche il div vuoto, è una schifezza?

risposte:

È possibile correggere ed elemento al piè di pagina utilizzando CSS:

position: fixed;
bottom: 0;

Tuttavia, sto cercando di capire esattamente cosa stai cercando di fare.

Intestazione e piè di pagina dovrebbero passare automaticamente al 100% attraverso la pagina se è un div.

La sezione centrale può essere impostata su altezza: auto; via css e riempirà il viewport spingendo il piè di pagina fino in fondo, ma per fare questo devi anche impostare il corpo al 100% per farlo funzionare.

html, body, #content {
height: 100%;
min-height: 100%;
}
#header {
height: 100px;
width: 100%;
background: blue;
position: fixed;
top: 0;
}
#content {
height: auto;
margin: 100px auto;
background: green;
}
#footer {
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}

Il tuo HTML dovrebbe apparire un po 'così:

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

Esempio di lavoro: http://jsfiddle.net/s4rT3/1/

Questo è il miglior esempio che ho visto:

http://css-tricks.com/snippets/css/sticky-footer/