1 min de lectura

Cómo poner el footer hasta abajo con CSS

Sucede que tienes un sitio con poco contenido, y eso provoca que tu footer quede en la parte media de la página y no hasta abajo como sería lo esperado.
Bien, la solución es realmente sencilla y solo requiere unas cuentas reglas de CSS.

Resultado de imagen para footer sticky

Reglas

  1. El body y el html deben tener un width de 100%
  2. Tu contenedor donde tienes metido todo el contenido de la página debe tener reglas que permitan definir el tamaño de alto.
  3. Tu contenedor debe tener un margen inferior restandole el tamaño de tu footer.

De modo que tu html quedaría algo así

 

Resultado de imagen para footer sticky

Gracias a JuanJo por el tip. La ayuda la obtuve de este sitio: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

 

¿Te gustó este artículo?

Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.

Líder técnico en equipos de desarrollo de software. Profesor de Desarrollo Web en la Universidad de Guadalajara. Emprendedora. Fundadora y CTO de CORB.mx. Ponente y tallerista. Colaboradora en proyectos de software libre y Open Source. Comprometida con la comunidad y la industria de la tecnología. Enfocada en el empoderamiento de las mujeres.

10 COMENTARIOS

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.