Una soluzione moderna "sticky footer" utilizza flexbox.
tl; dr:: impostare contenitore (corpo) per display:flex e il bambino (piè di pagina) che si desidera spostare verso il basso per margin-top:auto.
Per prima cosa, impostiamo il corpo a "flettere" verticalmente i suoi elementi, assicurandoci che sia al 100% di altezza.
Quindi si imposta flex: 0 0 50px sull'elemento footer, che significa: "non crescere, non ridurlo e avere un'altezza di 50 px". Potremmo infatti omettere interamente l'attributo flex e andare semplicemente con height:50px.
Possiamo impostare display:flex su cose come il <body> in sé un po 'incautamente, perché figli di un contenitore flessibile hanno un valore implicito di flex: 0 1 auto se omesso, che è (quasi) equivalente a flex:none (che è una scorciatoia per flex:0 0 auto)
È lo margin:auto che ci dà quello che vogliamo. Applicati all'interno di un contenitore flessibile, i margini automatici assumono un nuovo significato, invece del solito "ottieni uguale quantità di spazio libero", significano "assorbire TUTTO lo spazio disponibile disponibile".
Dal spec (8.1. Aligning with auto margins):
Prima di allineamento tramite giustificare il contenuto e allineare-sé, qualsiasi spazio libero positiva è distribuito per i margini di auto in quella dimensione.
Detto più simply:
Se si applica margini auto a un elemento flessibile, tale elemento verrà automaticamente estendere il suo margine specificato per occupare lo spazio extra in flessione contenitore
A parte: il "normale" approccio al layout di una flexbox sarebbe probabilmente quello di flettere al 100% verticalmente l'ala della sezione centrale <div id="main>...</div>, quale anche farebbe un piè di pagina "bastone" alla parte inferiore. Questo approccio ci mostra che il modello di box flessibile è, infatti, abbastanza flessibile da consentirci di ridimensionare/spostare elementi isolati.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#footer {
background-color: #efefef;
flex: 0 0 50px;/*or just height:50px;*/
margin-top: auto;
}
<p>we've assumed only that there's random space-taking content above the footer...</p>
<p>lorem ipsum dolor flex...</p>
<div>
<p>random content.</p><p>random content.</p><p>random content.</p><p>random content.</p>
</div>
<div id="footer">FOOTER</div>