The 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 as a general rule, if the page content before the footer is relatively small, or if a display with a large vertical resolution is used, it is possible that the footer does not appear at the bottom of the page, such as.
Because the footer is basically a common part of all the pages of a site, the content of different pages varies, so it is possible that some of the page content is not enough to appear such a problem. In addition, especially contains the background of the footer, this problem will affect the aesthetics.
So we want the footer to be exactly at the bottom, regardless of the amount of content on the page.
How to fix a footer in the bottom part
is absolute positioning feasible?
Maybe someone thought about setting the footer to position:fixed and then positioning it at the bottom. Regardless of the IE6 that does not support this property value, the effect is that if the page itself is sufficiently rich, this way the footer will appear at the bottom of the browser at the beginning, and when scrolling the page, the footer remains in its original position. This effect, obviously for most of the site is not appropriate.
As you can see, the effect we need is:
When the Web page content is large, the bottom footer is only visible when scrolling to the bottom.
When the page content is small, the footer remains at the bottom of the entire page, leaving the rest white.
General, simple implementation method
CSS Sticky Footer provides a reasonable way to implement this fixed footer at the bottom. However, on the one hand this is an English site, on the other hand, it provides a little bit of the wording can be improved, so this article will refer to its content, give a reasonable way to achieve.
First you need such an HTML structure:
<body> <p class= "wrapper" > <!--Web Content-- <p class= "Footer_placeholder" ></p > </p> <p class= "Footer" > <!--footer-- </p> </body>
P.wrapper is the outer container for everything except the footer in the Web page, and the footer P.footer is at the same level. P.footer_placeholder must be placed at the end of all content of the Web page, that is, as the last child element of the P.wrapper, its role will be explained in the following article.
Next, write the CSS, followed by instructions.
HTML, body{height:100%;}When the content of the page is insufficient, the actual height of the body and HTML may be less than the viewable range of the browser, so write a height of 100% to the body and HTML. In addition, the next direct child element will also use a percentage notation, and the notation of percentages must be valid only if the immediate parent element has a defined height definition.
. wrapper{ min-height:100%; _height:100%; margin-bottom:-120px; /* Assume that the height of the footer is 120px*/ }All Web content in this p.wrapper, defines the minimum height (IE6 use hack), because this element of the parent element is defined 100% height of the body, so regardless of the content, p.wrapper the height of this element will occupy the entire browser visual range. Then, according to the height of the footer, set the equal bottom margin negative value so that the footer appears exactly at the end of the page content.
. footer,. footer_placeholder{height:120px;} /* Assume that the height of the footer is 120px*/P.footer_placeholder, such as literal meaning, the placeholder element of the footer, which is just an empty p, defines the same height as the footer, it exists in order to leave a position on the footer. Such a thing could happen without it ↓
Here, the footer fixed at the bottom has been implemented. The CSS part together is:
HTML, body{height:100%;} . wrapper{ min-height:100%; _height:100%; margin-bottom:-120px; /* Assume that 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 part of the CSS: body{margin:0;} . Footer_placeholder{clear:both;}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
