Come attaccare div a fondo senza assoluto?

Question

Così ho un piè di pagina:

<div id="footer" > 
    <div style="padding:20px;"> 
     Footer 
    </div> 
</div> 

che è in involucro con stile:

#page { width:964px; margin:0 auto; } 

quindi ho bisogno che il div piè sarebbe attaccato alla parte inferiore del browser. Il problema è se l'aggiunta di:

position:absolute; 
bottom:0; 

Alcuni dei div precedente interseca con piè di pagina e anche ho bisogno di impostare altezza e larghezza per la mia auto.

Answer 1

Usa:

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

Ecco un buon article per capire come position: funziona

Answer 2

This non è esattamente quello che chiedi, ma è un'implementazione simile ho fatto usando position: fixed .

Per quello che stai cercando di raggiungere dovrai usare position: absolute per farlo accadere. E quindi dovrai distribuire manualmente l'altezza dell'elemento per adattarlo correttamente. E quando hai contenuto all'interno dello footer, puoi utilizzare padding per perfezionare la forma.

Queste sono le uniche opzioni possibili. O vai per il posizionamento fixed o il posizionamento absolute.

Answer 3

Prova come questo ..

Il CSS

html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
} 

Il codice HTML

<div class="wrapper"> 
    <p>wrapper text here</p>  
    <div class="push"></div> 
</div> 

<div class="footer"> 
    <p>footer text here.</p> 
</div>