2010-02-15 8 views
15

Ho visto il metodo Ryan Fait's per il piè di pagina appiccicoso e uno here e here.Perché non usato posizione: fissato per un piè di pagina "appiccicoso"?

Perché queste persone creano modelli di piè di pagina appiccicosi quando #footer{position:fixed; bottom:0;} è sufficiente?

EDIT:

vorrei aggiungere che l'uso position: fixed; per un piè di pagina si rompe margin: auto; centratura in (almeno) alcuni browser, creando così la necessità di un tag wrapper. Parte del mio problema con i metodi sopra menzionati sono i tag extra che sono confusi, sintatticamente scorretti (per i "puristi dell'HTML") e mangia larghezza di banda. Tuttavia, un singolo wrapper attorno al footer è ancora, a mio parere, migliore di un modello di pagina completamente confuso con cui iniziare. E, il "mio" modo è ancora più semplice e consuma meno larghezza di banda.

+2

Un piè di pagina appiccicoso è uno che si attacca alla parte inferiore della finestra quando il contenuto non è molto alto, ma quando il contenuto è più alto dell'altezza della finestra il piè di pagina si comporta come un normale piè di pagina, viene premuto sotto il contenuto non , come la posizione stabilita ti darebbe, fluttuando sul contenuto. Può essere che la posizione: fissa è l'effetto desiderato, ma non è quello che cercano e ottengono i footer sticky. Personalmente, penso che le pagine demo pubblicate per le tecniche shodul abbiano sia pagine di esempio alte che brevi per illustrare meglio l'effetto. – wheresrhys

+0

@wheresrhys - Hai un buon punto, nel qual caso l'intero thread deve essere riconsiderato. Che dire di 'position: absolute; bottom: 0; 'per il tuo tipo di footer appiccicoso? – Moshe

+0

che non funzionerà, anche perché si sovrapporrà alla parte inferiore del contenuto (a meno che non si aggiunga il riempimento, ma questo combinato con l'altezza del 100% sul contenuto causerà la visualizzazione di barre di scorrimento permanenti). Per impedirlo, penso che sia necessario implementare una delle soluzioni a cui si è collegati. – wheresrhys

risposta

11

La differenza tra l'utilizzo di position: fixed e Ryan Fait's method è piuttosto fondamentale.

Quando si utilizza position: fixed, il piè di pagina è sempre visibile, e non è quello che un appiccicoso footer sta cercando di fare.
Il significato di un piè di pagina appiccicoso deve rimanere incollato sul fondo, eccetto se il contenuto è più lungo dell'altezza del viewport. Nel nella custodia, il piè di pagina appiccicoso funzionerà come un normale piè di pagina, visualizzato appena sotto il contenuto della pagina.

Here you can see the effect di un piè di pagina appiccicoso. Nella finestra dei risultati, si vede che il piè di pagina rimane nella parte inferiore della pagina. Fai clic sul pulsante "Aggiungi contenuto" per aggiungere contenuti, quindi vedrai che il piè di pagina si sposta verso il basso per rimanere sotto il contenuto.


1. Questa è una fotografia del 10 gennaio 2013 dal Wayback Machine, come sito di Ryan per sé non contiene il post originale più a lungo.

+0

Entrambi i link sono morti in questo post. – Script47

+0

@ Script47 Capisco. Proverò a resuscitare o reindirizzare il link a mcemperor.nl, sostituirò anche il link al footer sticky di Ryan. –

+0

Si può controllare se Internet Archive ha qualcosa? Apprezzo il fatto che tu abbia aggiornato una risposta così vecchia. – Script47

0

Ok "bastone" con me in questa risposta :) L'unica differenza tra il metodo e il metodo piè di pagina appiccicoso, come indicato nel altra risposta, è che il piè di pagina appiccicoso appare solo sotto tutto il contenuto della pagina principale e non copre mai il contenuto della pagina.

Quindi, per risolvere tutto ciò che si fa è rendere il contenuto della pagina principale in un semplice wrapper div che si imposta una posizione: relativo; inizio: 0px; a sinistra: 0px; e fai in modo che z-index sia maggiore dell'originale della pagina. L'unica modifica che risulta da questo div che avvolge il contenuto della pagina è che è collocato sopra gli elementi della pagina originale poiché lo z-index è più alto. Quindi, posiziona il piè di pagina nell'html con una posizione: fissa, in basso: 0px; e rendi lo z-index inferiore al contenuto della pagina e TA-DA! Il piè di pagina non viene mai visualizzato sopra il contenuto della pagina. Per fare in modo che funzioni, il contenuto della pagina deve avere uno sfondo opaco per coprire il piè di pagina.

Una nota: ci sarà ancora una piccola differenza tra questo e il piè di pagina "sticky" - il piè di pagina appiccicoso non "slide" fuori dal fondo del contenuto della pagina così come il metodo di cui sopra quando si scorrere verso il basso. Tuttavia, poiché questa è solo una piccola differenza di interfaccia utente, ritengo che il metodo di cui sopra sia superiore in termini di semplicità e prestazioni al piè di pagina appiccicoso. E, alcune persone potrebbero pensare che è più bello quando il piè di pagina "scivola fuori" come nel metodo sopra.

Penso che questo dovrebbe rispondere pienamente alla tua domanda.