HTML, CSS sticky footer (contenuto in crescita)

Sto cercando di ottenere un footer appiccicoso in fondo a un div che ha un’altezza dynamic (contenuto in crescita). Il div deve fluttuare nel mezzo della pagina (stessa distanza da sinistra e destra).

Ho il seguente codice HTML (privato di cose irrilevanti):

  

e il seguente CSS (anche privato delle cose irrilevanti):

 html { height: 100%; margin: 0px; padding: 0px; } body { margin: 0px; height: 100%; } .bodybackground { height: 100%; min-height: 100%; } .container { min-height: 100%; display: inline-block; /* needed make it float in the middle of body */ top: 0px; position: relative; padding: 0px; padding-bottom: 158px; /* height of footer */ } .mainContainer { position: absolute; height: 100%; overflow: auto; } .pagefooter { position: absolute; bottom: 0px; margin: 0px; padding: 0px; height: 158px; } 

Tuttavia, il contenuto di mainContainer fluttua fuori e continua dietro il piè di pagina – invece che il piè di pagina si trova in fondo. Ho provato praticamente tutto quello che ho potuto trovare tranne gli esempi che mi costringono a cambiare la proprietà di visualizzazione del contenitore, in quanto avevo bisogno di mantenerlo fluttuante nel mezzo.

Qualche indizio su dove sono un idiota? Grazie!!


Avevo bisogno di giocherellare un po ‘di più con il .push, ma questo ha risolto il problema! Grazie per la risposta rapida!

Usando absolute, footer e mainContainer sono soggetti a dove li metti. Se si utilizza il valore assoluto e si imposta il piè di pagina in basso, si limiterà alla parte inferiore della finestra.

Per appiccicoso, dovresti usare le unità relative e le altezze corrette dove necessario.

 html, body { width:100%; height:100%; } #wrap { min-height:100%; height:auto !important; height:100%; margin: 0 auto -158px; /* Bottom value must = footer height */ } .pagefooter, .push { width:100%; height:158px; position:relative; bottom:0; } 

L’ordine va

  

In questo modo, il piè di pagina ha sempre spazio sufficiente ed è impostato sul fondo. margine: l’auto all’interno dell’involucro centrerà l’involucro (quindi finché non è larghezza: 100%, centrerà senza la linea)

Quindi, stai cercando un footer appiccicoso con un componente centrato. Il modo più semplice per farlo sarebbe quello di creare un elemento di posizione fissa nella parte inferiore con un div centrato al suo interno (in pratica, un div con larghezza e margine specificati: auto).

Puoi vedere un esempio di questo su http://jsfiddle.net/gHDd8/ – il CSS è fondamentalmente

 .outerBlockElement { position: fixed; bottom: 0; left: 0; right: 0; } .innerBlockElement { width: 50%; margin: auto; } 

Dove l’HTML è equivalente a

 

I am sticky footer text!

Il piè di pagina appiccicoso rimane nella parte inferiore del viewport, centrato nella pagina.