Incase you fell asleep..
and missed the 80s… i found a few relics…
and missed the 80s… i found a few relics…
Its hard to get footers positioned right with CSS. There are numerous techniques to do this.
The Problem
If you rely on the footer clearing all other elements, then on smaller pages, the footer wont push to the bottom because the document ends before the screen.
If you specify position:absolute; bottom:0px; left: 0px; … etc… When you load a page longer than the screen display resolution the footer floats on top of content
My Solution
First find the height of the document
function getHeight(){
y = 0;
x = 0;
var test1 = document.body.scrollHeight;
var test2 = document.body.offsetHeight
if (test1 > test2) // all but Explorer Mac
{
x = document.body.scrollWidth;
y = document.body.scrollHeight;
}
else // Explorer Mac;
//would also work in Explorer 6 Strict, Mozilla and Safari
{
x = document.body.offsetWidth;
y = document.body.offsetHeight;
}
innerDim();
}
Now the height of the Viewport [i.e. the visible screen area]
function innerDim(){
var o;
innerH=0;
if (self.innerHeight) // all except Explorer
{
o = self.innerWidth;
innerH = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
o = document.documentElement.clientWidth;
innerH = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
o = document.body.clientWidth;
innerH = document.body.clientHeight;
}
changeFooter();
}
Now compare the two , If the document is shorter than the screen force the footer to sit at the absolute positioned bottom:0px.
Else drop it 50px south of the document end for long pages.
function changeFooter(){
var z = y + 50;
var q = innerH - 32;
if (innerH < y){
document.getElementById("footer").style.top = z+"px";
}else {
document.getElementById("footer").style.top = q+"px";}
}
I'm a freelance web designer based in San Diego, CA.
I graduated May 2007 with a Bachelors Degree in Media Arts from Platt College concentrating on web design and development.
I've designed part-time for two years and I am now looking forward to full-time employment.