CSS for the footer at the bottom of the page

Location of the footer problem

Page footer (footer), which is usually used to place help links and copyright information. The footer should naturally be at the bottom of the page, but according to the general practice, if the page before the footer is relatively small, or use a large vertical resolution of the display, it is possible that the footer does not appear at the bottom of the page, the following figure.

Because the footer is basically a common part of all the pages of a Web site, the amount of content on different pages varies, so it is true that some pages may not have enough content to appear. In addition, especially contains the background of the footer, this problem will affect the beauty.

So we want the footer to be exactly at the bottom, regardless of the amount of content on the page.

How to fix the bottom of the footer

is absolute positioning feasible?

Someone might have thought of setting the footer to position:fixed, and then locating it at the bottom. Regardless of the IE6 that does not support this attribute value, the effect is that if the page itself is sufficient, the writing will make the footer appear at the bottom of the browser in the beginning, while scrolling the page, the footer will keep the original position. This effect is obviously not appropriate for most sites.

As you can imagine, the effect we need is:

When the content of the Web page is more, the bottom footer is only seen when scrolling to the bottom.

When the page content is low, the footer remains at the bottom of the entire page, leaving the rest in white.

General and simple methods of implementation

CSS Sticky Footer provides a reasonable way to implement this fixed footer at the bottom. But on the one hand this is an English site, on the other hand, it provides a few ways to improve the wording, so this article will refer to its content, give a reasonable implementation.

First you need an HTML structure like this:

xml/html Code copy content to clipboard

1. < body >
2. < div class = "wrapper" >
3. <!--Web content;
4. < div class = "Footer_placeholder" > </ div >
5. </ div >
6. < div class =< Span class= "Attribute-value" > "footer" >
7. <!--footer;
8. </ div >
9. </ body >

Div.wrapper is the outer container for everything except the footer in a Web page, and the footer div.footer and it is at the same level. Div.footer_placeholder must be placed at the end of all content on the page, that is, as the last child of the Div.wrapper, its role will be explained in the following article.

Next, write the CSS, in turn to explain.

CSS code copy content to clipboard

HTML, body{height:100%;}

When the content of the Web page is not enough, the actual height of the body and HTML may be less than the visual range of the browser, so give the body and HTML write a height of 100%. In addition, the following direct child elements also use percentages, and percentages must be written in a well-defined height definition of the parent element.

CSS code copy content to clipboard

. wrapper{

min-height:100%;

_height:100%;

margin-bottom:-120px; /* Assume the height of the footer is 120px*/

}

All Web page content is in this div.wrapper, the minimum height is defined (IE6 uses hack), because the element's parent element is the body that defines the 100% height, so the height of this element, regardless of its content, occupies the entire browser's visual range. Then, according to the height of the footer, set the equal bottom margin negative so that the footer appears at the end of the page's content.

CSS code copy content to clipboard

. Footer,. footer_placeholder{height:120px}/* Assume the height of the footer to be 120px*/

Div.footer_placeholder, such as literal, footer placeholder element, it is just an empty div, the definition of height and footer is the same, it exists in order to leave the footer position. If there's no it could happen this thing ↓

Here, the footer fixed at the bottom has been implemented. The CSS sections together are:

CSS code copy content to clipboard

HTML, body{height:100%;}

. wrapper{

min-height:100%;

_height:100%;

margin-bottom:-120px; /* Assume the height of the footer is 120px*/

}

. footer,. footer_placeholder{height:120px;}

If you also need to consider CSS initialization and cleanup floats, you may also need to add the following CSS:

body{margin:0;}

. Footer_placeholder{clear:both;}