Sticky Footer - Footer fijo con CSS
Jorge Olaya
Jorge Olaya
Frontend DeveloperEs un truco muy útil a utilizar y no hay muchos sitios que lo implementen, sirve principalmente para darle al usuario la opción de tener enlaces a la vista sin tener que depender de el resto del contenido...
Sticky Footer es un efecto muy bueno realizado con CSS, la mayor ventaja para el proyecto web es que funciona con todos los navegadores, incluyendo Internet Explorer...
Para hacer que funcione, en el CSS se realiza lo siguiente... Para este proceso cabe decir que se puede cambiar los nombres según parezca... El valor negativo para el margen en .
wrapper es el mismo número que el alto de .footer y .push. El margen negativo siempre deberá ser la misma que la altura total del footer, esto se hace teniendo en cuenta paddings o bordes que se hayan o no agregado...
Se pueden omitir las propiedades height: auto !important; y height: 100%; pero son un hack para que el footer funcione en Internet Explorer 6...
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
.footer, .push {
height: 100px;
}
En el HTML, sigue la siguiente estructura. Nada del contenido puede estar fuera de .wrapper ni de .footer salvo que ya esté posicionado por medio de CSS...
<html>
<head>
<link rel="stylesheet" href="style.css" ... />
</head>
<body>
<div class="wrapper">
<p>Contenido</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2014</p>
</div>
</body>
</html>
Es muy sencillo de usar, un muy buen truco...
Written by Jorge Olaya
Jorge Olaya
Jorge specializes in creating visually appealing and intuitive user interfaces. His focus on design and user experience ensures that applications are both functional and engaging.
