By simply adding a footer div on the bottom of the content code ?
Problem: what if the content is smaller than the window ? The footer’s position will not be on the bottom of the page, it will be positioned right after the content.
By positioning the footer div as absolute with bottom:0 ?
Problem: What if the content is larger than the window ? Then the footer will lay on top of the content.
After much investigations concerning this issue, I would like to recommend two found solutions for this problem:
1. By using CSS: http://ryanfait.com/sticky-footer/
2. By using JavaScript: http://www.alistapart.com/articles/footers
Finally, I have decided to use the second approach. I have added the following JavaScript functions into my master page:
1: function getWindowHeight() {
2: var windowHeight = 0;
3: if (typeof(window.innerHeight)=='number')
4: {
5: windowHeight = window.innerHeight;
6: }
7: else
8: {
9: if (document.documentElement &&
10: document.documentElement.clientHeight)
11: {
12: windowHeight =
13: document.documentElement.clientHeight;
14: }
15: else
16: {
17: if (document.body &&
18: document.body.clientHeight)
19: {
20: windowHeight = document.body.clientHeight;
21: }
22: }
23: }
24: return windowHeight;
25: }
26: function setFooter() {
27: if (document.getElementById)
28: {
29: var windowHeight = getWindowHeight();
30: if (windowHeight > 0)
31: {
32: var contentHeight =
33: document.getElementById('headerandcontent').offsetHeight;
34: var footerElement =
35: document.getElementById('footer');
36: var footerHeight =
37: footerElement.offsetHeight;
38: if ((windowHeight - (contentHeight + footerHeight) >= 0))
39: {
40: footerElement.style.position = 'relative';
41: footerElement.style.top =
42: (windowHeight - (contentHeight + footerHeight)) + 'px';
43: }
44: else
45: {
46: footerElement.style.position = 'static';
47: }
48: }
49: }
50: }
The the call to the setFooter() function looks like this:
1: window.onload = function() {
2: setFooter();
3: }
4: window.onresize = function() {
5: setFooter();
6: }
This worked perfectly… except for one particular page and this behavior was only present in Firefox. This page binds asynchronously three gridviews in an Ajax postback after the page has already been initially loaded.
After the gridviews are bound, in IE the height is re-calculated and the footer is re-positioned correctly.
For some unknown reason, Firefox does not call setFooter() again after the gridviews are bound. This means that, after the gridviews are bound, in Firefox the calculated height above the footer is still the value from the initial loading. This results in having on the page, between the top content and the footer, a white space rendered, which was rendered actually on the initial page load as necessary because the gridviews were empty and not populated yet so the content was smaller than the window.
The solution? We have to call setFooter() after the page is loaded from an ajax postback, like this:
1: var footerPageLoadingHandler = function(sender, args)
2: {
3: setFooter();
4: }
5: var footerprm =
6: Sys.WebForms.PageRequestManager.getInstance();
7: footerprm.add_pageLoaded(footerPageLoadingHandler);
Perhaps this will save you precious time on the next occasion.
FitGeekGirl 