Bottom-up implementation of Footer in the web page (compatible with IE6/7/8, FF3)

Author: Tony Qu

Recently, I have a requirement that the footer should be pasted to the bottom. At first, the absolute position footer scheme should be used to set the footer top). Although it can handle most of the situations, sometimes due to page irregularities, the calculated height is too small, causing the bottom to go up; sometimes it may even stack on the page content. We originally computed in onmouseup, onresize, and onload. However, due to the huge system size, there are often some layer-level onmouseup events that cannot be passed up. It may be that 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 of the visible content does not include the footer) does not exceed the actual height of the browser's customer area, the footer should be pasted at the bottom of the browser, but there cannot be a scroll bar.

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/14113U5A-0.png "width =" 400 "height =" 300 "/>

In the figure, the area is displayed in red)

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

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/14113T510-1.png "width =" 404 "height =" 409 "/>

In the figure, the area is displayed in red)

 

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 the 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, which is assumed to be a DIV with the ID contentContainer). Note that the Content here includes any Content except footer, including headers ). Because of the demand for B, we have to consider how to make footer do not continue to be seen floating at the bottom of the page after the content exceeds the display height), 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.

 

Therefore, we have obtained the following solutions:

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';       }}

Finally, we chose to re-calculate the height. Because we set min-height in addition to IE6), 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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
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 to add a container) to make the problem easier to solve. The original page does not contain containers such as ContentContainer that contain both header and content)