I have template i want to the have a sticky footer but the footer need to remain attached to the content as the background in both the footer and the content combine to make an image at the base of the page that interact with the content.
I need a way to force the design to stretch to the full height of the window (Any idea welcome)
I found on list apart, a js the can gather the browser window height and work out the difference in height of that and the content.
They explane how you can use the js to control a div element. They use this to position the footer.
If you can control any div element, could I ad div at the base of my content called #contentfooter and control the height or the margin-top .
Is my thinking correct or way off the mark.
Below is the full script.
This bit gets the window height of the window?
Code:
function getWindowHeight() {
var windowHeight=0;
if (typeof(window.innerHeight)=='number') {
windowHeight=window.innerHeight;
}
else {
if (document.documentElement&&
document.documentElement.clientHeight) {
windowHeight=
document.documentElement.clientHeight;
}
else {
if (document.body&&document.body.clientHeight) {
windowHeight=document.body.clientHeight;
}
}
}
return windowHeight;
}
The next bit does the maths and positions the footer. Could this de rework to WindowHeight - contentHeight = X then ad x to define the height my #contentfooter element?
I have added a div called #wrapper inside the body tag hopefully could be used to define the page height. but this is not part of the code below. just forward thinking assume it could replace the document.getElementById('content') element below.
Code:
function setFooter() {
if (document.getElementById) {
var windowHeight=getWindowHeight();
if (windowHeight>0) {
var contentHeight=
document.getElementById('content').offsetHeight;
var footerElement=
document.getElementById('footer');
var footerHeight=footerElement.offsetHeight;
if (windowHeight-(contentHeight+footerHeight)>=0) {
footerElement.style.position='relative';
footerElement.style.top=(windowHeight-
(contentHeight+footerHeight))+'px';
}
else {
footerElement.style.position='static';
}
}
}
}
Dissecting the setFooter() function
The setFooter() function first retrieves the height of the viewport and stores it in thewindowHeight variable:
Code:
var windowHeight = getWindowHeight();
Second it retrieves the height of the content element and the footer element:
Code:
var contentHeight=
document.getElementById('content').offsetHeight;
var footerElement=document.getElementById('footer');
var footerHeight=footerElement.offsetHeight;
Next it decides if the height of the window is larger than the combined height of the content and footer:
Code:
if (windowHeight-(contentHeight+footerHeight)>=0)
If this is the case, it repositions the footer relative (to its place in the normal flow) at the bottom of the page:
Code:
footerElement.style.position='relative';
footerElement.style.top=
(windowHeight-(contentHeight+footerHeight))+'px';
If they do fill the height of the window, the element is repositioned static to follow the normal flow:
Code:
footerElement.style.position='static';
To make everything work include the getWindowHeight() function in your script and add two functions that call your setFooter() function at the moment our web document is loaded or resized:
Code:
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
the full article can be found here
http://www.alistapart.com/articles/footers/Any Help much appreciated tried many css solutions but non work with my design.
Graeme
Login
Register
Rules
FAQ
The team
