Come attaccare un piè di pagina in fondo in css?

Question

Sto riscontrando il classico problema del posizionamento di un piè di pagina nella parte inferiore del browser. Ho provato metodi che includono http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ma con nessun risultato positivo: il mio piè di pagina continua sempre ad apparire nel mezzo della finestra del browser sia in FF che in IE.

Nella HTML ho avuto questa semplice struttura

<form> 
... 
<div class=Main /> 
<div id=Footer /> 
</form> 

Ecco il codice CSS che è rilevante per il problema css piè di pagina:

* 
    { 
     margin: 0; 
    } 


html, body 
{ 
    height: 100%; 
} 


    #Footer 
    { 
     background-color: #004669; 
     font-family: Tahoma, Arial; 
     font-size: 0.7em; 
     color: White; 
     position: relative; 
     height: 4em; 
    } 



    .Main 
    { 
     position:relative; 
     min-height:100%; 
     height:auto !important; 
     height:100%; 

     /*top: 50px;*/ 

     margin: 0 25% -4em 25%; 

     font-family: Verdana, Arial, Tahoma, Times New Roman; 
     font-size: 0.8em; 
     word-spacing: 1px; 
     line-height: 170%; 
     /*padding-bottom: 40px;*/ 
    } 

Dove sto sbagliando? Ho provato davvero tutto Se ho perso qualche informazione utile per favore fatemelo sapere.

Grazie per qualsiasi suggerimento in anticipo.

saluti,

---

grazie a tutti per le vostre risposte. ha funzionato con:

position:absolute; 
    width:100%; 
    bottom:0px; 

posizione di impostazione: fisso non ha funzionato in IE per qualche motivo (mostrava ancora piè di pagina nel mezzo del browser), ha lavorato solo per FF.

Answer 1

Prova a impostare gli stili del tuo footer su position:absolute; e bottom:0;.

Answer 2

#Footer { 
    position:fixed; 
    bottom:0; 
} 

Questo farà sì che il piè di pagina rimanga nella parte inferiore della finestra del browser, indipendentemente da dove scorri.

Answer 3

Ho avuto un problema simile con questo tutorial di sticky footer. Se la memoria serve, è necessario inserire i tag del modulo nella sezione < div class=Main /> poiché il tag del modulo stesso causa problemi con la formazione.

Answer 4

#Footer { 
position:fixed; 
bottom:0; 
width:100%; 
} 

ha lavorato per me

Answer 5

Se si utilizza il "position: fixed; in basso: 0;" il piè di pagina verrà sempre visualizzato nella parte inferiore e nasconderà il contenuto se la pagina è più lunga della finestra del browser.

Answer 6

Penso che molte persone stiano cercando un piè di pagina sul fondo che scorre invece di essere fisso, chiamato appiccicoso. I piè di pagina fissi coprono il contenuto del corpo quando l'altezza è troppo corta. Devi impostare il contenitore html, body e page su un'altezza del 100%, impostare il footer sulla posizione assoluta in basso. Il contenitore del contenuto della pagina ha bisogno di una posizione relativa affinché funzioni. Il tuo footer ha un margine negativo uguale all'altezza del footer meno il margine inferiore del contenuto della pagina. Vedi la pagina di esempio che ho postato.

Esempio con note: http://markbokil.com/code/bottomfooter/

Answer 7

questo ha funzionato per me:

.footer 
{ 
    width: 100%; 
    bottom: 0; 
    clear: both; 
} 

Answer 8

La seguente proprietà CSS farà

position: fixed; 

spero che questo aiuto.

Answer 9

#footer{ 
position: fixed; 
bottom: 0; 
} 

http://codepen.io/smarty_tech/pen/grzMZr