Bottom-up implementation of footer in web pages (compatible with IE6/7/8, ff3) by Tony Qu

Http://www.cnblogs.com/tonyqus/archive/2009/08/15/adaptive_footer.html

Author: Tony Qu

Recently, I have a requirement that the footer should be pasted to the bottom. At first, I adopted the absolute position footer Scheme (set the top of footer), although it can cope with most situations, however, sometimes the calculated height value is too small because the page is not standard, leading to the Bottom Floating; sometimes it may even stack on the page content. We originally computed in onmouseup, onresize, and onload. However, due to the huge system size, some layer onmouseup events are often unable to be uploaded (probably because the relationship between stoppropagation and cancelbubble is called ), there are many unknown situations.

Let's look back at the specific requirements for this demand:

A. When the total height (excluding the footer) of the visible content does not exceed the actual height of the browser's client area, the footer should be pasted at the bottom of the browser, but there cannot be a scroll bar.

(The red color indicates the area on the screen)

B. When the total height of the visible content exceeds the actual height of the browser's customer region, the footer will go down with the content

(The red color indicates the area on the screen)

 

In fact, the first thing I think of is to find a way to calculate the total height of content except for the footer height. The question is how to calculate the total height? When? This is indeed a question worth thinking about.

 

Computing with a general Height seems very simple, but is it true? If we use the DOM Traversal method to calculate the height, it is difficult to obtain an accurate height, because not all elements need to be included in height calculation (for example, elements with float and position as absolute ). So I thought of asking the browser for help and trying to solve it with the native attributes of HTML Dom. At this time, I thought of the attributes of document or window. In ie, we found document.doc umentelement. clientheight (because the doctype we use is XHTML 1.0, document. Body. clientheight cannot work normally). In Firefox, we found window. innerheight. So far, we can get the height of the entire page, so the total height of the content removed from the footer height can naturally be obtained using the following formula:

Remove the total content height of footer = total page height-footer height

The next step is to assign the height to the content container (assume it is a div with the ID of contentcontainer). Note that the content here includes anything except footer (including headers ). Because of the demand for B, we have to consider how to make footer not be visible after the content exceeds the display height (floating at the bottom of the page), so we certainly cannot use top or margin-top, after reading the CSS manual, I found that one of the most suitable attributes is Min-height. When the actual content is not enough, the setting height will still be maintained. If the setting height is exceeded, the height will naturally increase, however, IE6 does not support Min-height. The experiment shows that height can be used in IE6.

 

 

var isIE6=navigator.userAgent.indexOf('MSIE 6')>0;var isIE=navigator.userAgent.indexOf('MSIE')>0;ion setFooterPosition()var objBodycontainer = document.getElementById("ContentContainer");   var footerHeight=document.getElementById('FooterContainer').offsetHeight;     f(!isIE)   if(window.innerHeight > footerHeight)       document.getElementById('ContentContainer').style.minHeight =  (window.innerHeight-footerHeight)+'px';lse       if(isIE6)       {           if(document.documentElement.clientHeight > footerHeight)               document.getElementById('ContentContainer').style.height =  (document.documentElement.clientHeight-footerHeight)+'px';       }       else       {                if(document.documentElement.clientHeight > footerHeight)               document.getElementById('ContentContainer').style.minHeight = (document.documentElement.clientHeight-footerHeight)+'px';       }}

 

 

Therefore, we have obtained the following solutions:

Finally, we chose to re-calculate the height. Because we set Min-height (except IE6), we basically ensured that we do not need to re-calculate the height when the content height changes, but there is a situation that must be considered, that is, the size of the client area of the browser changes, so the onresize event and onload event are selected at last.

The complete code is as follows:

 

function setFooterPosition(){         var objBodycontainer = document.getElementById("ContentContainer");        var footerHeight=document.getElementById('FooterContainer').offsetHeight;              if(!isIE)    {        if(window.innerHeight > footerHeight)            document.getElementById('ContentContainer').style.minHeight =  (window.innerHeight-footerHeight)+'px';    }    else    {            if(isIE6)            {                if(document.documentElement.clientHeight > footerHeight)                    document.getElementById('ContentContainer').style.height =  (document.documentElement.clientHeight-footerHeight)+'px';            }            else            {                                        if(document.documentElement.clientHeight > footerHeight)                    document.getElementById('ContentContainer').style.minHeight = (document.documentElement.clientHeight-footerHeight)+'px';            }    }}if(isIE){    window.attachEvent("onload",setFooterPosition);    window.attachEvent("onresize",setFooterPosition);}else{    window.addEventListener("load",setFooterPosition,false);    window.addEventListener("resize",setFooterPosition,false);}</script><style type="text/css">body{margin:0;}#content{height:300px;background-color:green;}#FooterContainer{height:30px;background-color:red;}</style><body><div id="ContentContainer"><div id="content">aa</div></div><div id="FooterContainer"></div></body>
 
In addition, this method has a small vulnerability. If float is used on some layers, the height returned by the browser may be inaccurate. Therefore, you must use the clear method to solve this problem, tell the browser that the float height needs to be calculated.
 
TIPS:
A. Many of the browser's built-in attributes are sometimes more accurate than the value calculated by the upper-Layer Code. After all, the browser is responsible for calling the rendering engine and knows what it presents better than anyone else.
B. Adjust the Page Structure (add container) to make the problem easier to solve. (The original page does not contain containers such as contentcontainer that contain both header and content.