Attaching a footer to the bottom of the page
Posted by chelfers | Posted in Web | Posted on 14-02-2010
0
I've been messing around with positioning a footer at the bottom of a page for a few hours now and finally after trial and error have a workable solution that seems to be cross browser compliant.
My first thoughts were to absolutely position the footer element at the bottom of the page, but I knew that it would overlap content if the viewport was too small. I messed around with it for awhile playing with margins, heights, and padding with little success. The final result ended up being a combination of previous attempts minus the absolute positioning, and we found a winner!
The basic run down goes a little something like this
html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 0 -100px 0; }
#spacer { height: 100px; }
#footer { height: 100px; }
</style>
The cool part is that this works in IE6-8, Safari, and Firefox. The key components to cross browser compliance are the height attributes. The height 100% attributes of html and body are inherited by IE and mimic ( by bug? ) the min-height attribute stretching the wrapper element the entire length of the viewport.
The spacer element along side the negative margin attribute ( make sure that both numbers match ) help to offset the footer and keep it snuggled at the bottom of the page.





