Cómo crear un Footer correctamente con CSS3

Por lo general el Footer siempre esta en la parta inferior de la pagina en el caso que no haya contenido, o debajo de todo el contenido en caso que el texto sobrepase el alto de la pantalla. Si en tu caso no es así no te preocupes porque aquí esta la solución.

Empezamos…

Creamos un HTML de ejemplo:

<div id="wrapper">
*contenido del wrapper
<div class="clear"></div>
</div>

<div id="footer">
*contenido del footer
</div>

CCS

*{ margin:0; padding:0; }
html, body {height:100%; }
#wrapper { height:100%; min-height:100%; height:auto!important; }
.clear { clear:both; padding-top:70px; }
#footer { min-height:70px; margin-top:-70px;  }

Wrapper sera el contenedor en este caso y siempre ocupando el 100% de la pantalla, pero marcamos como prioritario que la altura sea automática (es decir, acorde con el texto).

Clear limpiar los floats y subir el height del Footer, si no el quedaría por debajo el 100% de la pantalla.

Es todo amigos, con esto ya tienen un Footer siempre al final de la pagina y visible en todos los navegadores.

blog_meet

This is a Standard Post

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed. Sigue leyendo

blog_boat

This is a Gallery Post

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed. Sigue leyendo

women

This is a Quote Post

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed. Sigue leyendo

blog_flower

Adipisicing elit sed

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed. Sigue leyendo

This is a Video Post

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed. Sigue leyendo

women

Perspiciatis unde omnis

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed. Sigue leyendo