¿Diferencia entre las implementaciones de pie de página adhesivo de CSS?

que he encontrado 2 implementaciones diferentes de un pie de página CSS pegajosa:¿Diferencia entre las implementaciones de pie de página adhesivo de CSS?

Ryan Fait pegajosa pie de página - http://ryanfait.com/sticky-footer/
Steve Hatcher pegajosa pie de página - http://www.cssstickyfooter.com/

Podría alguien explicar la diferencia entre cómo funciona cada uno de ellos?

Y si hay otras implementaciones conocidas, ¿podría publicar un comentario o editar esta pregunta?

Fuente

2011-04-21 coffee-grinder

Son bastante similares en términos de función. La primera fuerza un div a la altura completa de la página y luego le da un margen negativo del tamaño del pie de página.

html, body { 
    height: 100%; /*set 100% height*/ 
} 
.wrapper { 
    min-height: 100%; /*content 100% height of page */ 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* negative value causes wrappers height to become (height of page) minus 142px, just enough room for our footer */ 
} 
.footer, .push { 
    height: 142px; /*Footer is the footer, push pushes the page content out of the footers way*/ 
}

Lo que esto hace es se asegura de que todo el contenido dentro de la envoltura div es 100% de la altura de la página menos la altura del pie de página. De modo que, siempre que el pie de página tenga el mismo tamaño que el margen negativo, se quedará en el espacio restante y aparecerá en la parte inferior del elemento.

El segundo también fuerza al contenido a ser el 100% de la altura de la página.

html, body {height: 100%;} /*set 100% height*/ 

#wrap {min-height: 100%;} /* make content 100% height of screen */

Luego crea un espacio en la parte inferior del contenido principal del mismo tamaño que el pie de página.

#main {overflow:auto; 
padding-bottom: 150px;} /* wrapper still 100% height of screen but its content is forced to end 150px before it finishes (150px above bottom of screen) */

Luego, utilizando la posición relativa y un margen superior negativo fuerza al pie de página a aparecer 150 píxeles por encima de su posición normal (en el espacio que acaba de hacer).

#footer {position: relative; 
margin-top: -150px; /* Make footer appear 150px above its normal position (in the space made by the padding in #main */ 
height: 150px; 
clear:both;}

Nota: Esto sólo funciona siempre y cuando el contenido de la página se mantiene dentro de .wrapper y #main dentro #wrap respectivamente, y el pie de página se encuentra fuera de estos contenedores.

Si no entendió alguna parte de eso, déjeme un comentario e intentaré responderlo.

Editar: En respuesta a user360122

marcado HTML para la primera:

<html> 
<body> 
<div class="wrapper"> 
<!--Page content goes here--> 
<div class="push"> 
<!--Leave this empty, it ensures no overflow from your content into your footer--> 
</div> 
</div> 
<div class="footer"> 
<!--Footer content goes here--> 
</div> 
<body> 
</html>

marcado HTML para el segundo:

<html> 
<body> 
<div id="wrap"> 
<div id="main"> 
<!--Page content goes here--> 
</div> 
</div> 
<div id="footer"> 
<!--Footer content goes here--> 
</div> 
</body> 
</html>

Recuerde incluir la hoja de estilo y declarar tipo de documento .etc (estas no son páginas html completas).

Fuente

2011-04-21 15:35:08

Buena respuesta George – David

Hola George, ¿tienes el marcado HTML para ello, por favor? Muchas gracias. – HorseKing

Actualizado con marcado HTML –

Hay un ejemplo en la documentación de arranque, que parece ser muy simple: http://getbootstrap.com/examples/sticky-footer/

Sin envoltorio o empuje necesario.

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
}

Fuente

2014-06-24 15:56:53

No funciona en IE7. Creo que el que usa un push-div funciona mejor que los navegadores cruzados y completeley sin js. – sasha

¿Diferencia entre las implementaciones de pie de página adhesivo de CSS?

Respuesta

Cuestiones relacionadas