Hacer que un pie de página CSS se siente en la parte inferior de la ventana del navegador o en la parte inferior del contenido

Question

Duplicado de this question.

Tengo un sitio existente (jacquelinewhite.co.uk), en él hay un pie de página. Actualmente, este pie de página siempre se encuentra debajo del contenido principal. Estoy tratando de hacer que flote en la parte inferior de la ventana del navegador, o si el contenido es más grande que la ventana, permanezca en la parte inferior del contenido.

Efectivamente, el HTML se estructura de la siguiente manera:

<div id="container"> 
    <div id="top_bar"> 
    </div> 
<div id="header"> 
</div> 
<div id="left_menu"> 
</div> 
<div id="right_content"> 
</div> 
<div class="clear"> 
</div> 
<!-- FOOTER AREA --> 
<div id="footer"> 
</div> 
<!-- END FOOTER AREA --> 
</div> 

He tratado posición absoluta, inferior 0, lo que pone el pie en la parte inferior de la ventana, pero si el contenido de la ventana es más grande que el pie de página cubre el contenido.

¿Cómo puedo solucionar esto?

Answer 1

Ésta es siempre funcionó bien para mí: CSS Sticky Footer

Answer 2

Pruebe esto ...

body { 
    margin:0; 
    padding:0; 
    z-index:0; 
    } 

    #toolbar { 
    background:#ddd; 
    border-top:solid 1px #666; 
    bottom:0; 
    height:15px; 
    padding:5px; 
    position:fixed; 
    width:100%; 
    z-index:1000; 
    } 

Answer 3

Suponiendo que está usando elemento de pie de página() encontré sólo añadir esto a CSS trabajado para mí

html, body { 
    height: 100%; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

footer { 
    margin-top: auto; 
}