Nuestro equipo de redactores ha pasado horas buscando la respuesta a tus búsquedas, te dejamos la respuestas de modo que nuestro deseo es resultarte de mucha apoyo.
Solución:
El pie de página pegajoso de Ryan Fait es muy agradable, sin embargo, encuentro que falta su estructura básica *.
Versión Flexbox
Si tiene la suerte de poder usar flexbox sin necesidad de admitir navegadores más antiguos, los pies de página adhesivos se vuelven trivialmente fáciles, y admite un pie de página de tamaño dinámico.
El truco para hacer que los pies de página se peguen al fondo con flexbox es hacer que otros elementos en el mismo contenedor se flexionen verticalmente. Todo lo que se necesita es un elemento de envoltura de altura completa con display: flex y al menos un hermano con un flex valor mayor que 0:
CSS:
html,
body
height: 100%;
margin: 0;
padding: 0;
#main-wrapper
display: flex;
flex-direction: column;
min-height: 100%;
article
flex: 1;
html,
body
height: 100%;
margin: 0;
padding: 0;
#main-wrapper
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
article
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
header
background-color: #F00;
nav
background-color: #FF0;
article
background-color: #0F0;
footer
background-color: #00F;
here be header
here be content
Si no puede usar flexbox, mi estructura base de elección es:
Que no está tan lejos de:
El truco para que el pie de página se adhiera es tener el pie de página anclado al relleno inferior de su elemento contenedor. Esta requiere que la altura del pie de página es static, pero he descubierto que los pies de página suelen ser de static altura.
HTML:
...
CSS:
#main-wrapper
padding: 0 0 100px;
position: relative;
footer
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
#main-wrapper
padding: 0 0 100px;
position: relative;
footer
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
header
background-color: #F00;
nav
background-color: #FF0;
article
background-color: #0F0;
footer
background-color: #00F;
here be header
here be content
Con el pie de página anclado a #main-wrapper, ahora necesitas #main-wrapper tener al menos la altura de la página, a menos que sus hijos sean más largos. Esto se hace haciendo #main-wrapper tener un min-height de 100%. También hay que recordar que sus padres, html y body también debe ser tan alto como la página.
CSS:
html,
body
height: 100%;
margin: 0;
padding: 0;
#main-wrapper
min-height: 100%;
padding: 0 0 100px;
position: relative;
footer
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
html,
body
height: 100%;
margin: 0;
padding: 0;
#main-wrapper
min-height: 100%;
padding: 0 0 100px;
position: relative;
footer
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
header
background-color: #F00;
nav
background-color: #FF0;
article
background-color: #0F0;
footer
background-color: #00F;
here be header
here be content
Por supuesto, debería cuestionar mi juicio, ya que este código está obligando a que el pie de página se caiga de la parte inferior de la página, incluso cuando no hay contenido. El último truco consiste en cambiar el modelo de caja que utiliza el #main-wrapper de manera que la min-height de 100% incluye el 100px relleno.
CSS:
html,
body
height: 100%;
margin: 0;
padding: 0;
#main-wrapper
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
footer
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
html,
body
height: 100%;
margin: 0;
padding: 0;
#main-wrapper
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
footer
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
header
background-color: #F00;
nav
background-color: #FF0;
article
background-color: #0F0;
footer
background-color: #00F;
here be header
here be content
Y ahí lo tienes, un pie de página adhesivo con tu estructura HTML original. Solo asegúrate de que el footer‘s height es igual a #main-wrapper‘s padding-bottom, y debería estar listo.
* La razón por la que encuentro fallas en la estructura de Fait es porque establece el .footer y .header elementos en diferentes niveles jerárquicos mientras se agrega un innecesario .push elemento.
El pie de página pegajoso de Ryan Fait es una solución simple que he usado varias veces en el pasado.
HTML básico:
CSS Sticky Footer
CSS:
*
margin: 0;
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 */
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Traducir esto para que sea similar a lo que ya tiene resultados con algo como esto:
HTML:
CSS:
*
margin: 0;
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 */
No olvide actualizar el negativo en el margen de la envoltura para que coincida con la altura de su pie de página y presione div. ¡Buena suerte!
Sección de Reseñas y Valoraciones
Tienes la opción de añadir valor a nuestra información colaborando tu veteranía en las acotaciones.