Saturday, 12 May 2012

Sticky Footer Finally Conquered!

I've been searching and testing out different codes to get my footer to stay at the bottom (aka sticky footer) for weeks and finally, I found a simple solution here. It has been incredibly useful for me and I can now spend my evenings doing something else!

The CSS:

html { 
position: relative; 
min-height: 100%; 

body {  
margin: 0 0 100px; /* bottom = footer height */ 

footer { 
position: absolute; 
left: 0; 
bottom: 0; height: 
100px; width: 100%; 


 The HTML:

<!DOCTYPE html> 
<head> 
<title></title> 
</head> <body> 
<nav></nav> 
<article>Lorem ipsum...</article> 
<footer></footer> 
</body> 
</html>

No comments: