Use CSS to locate a page's "footer"

Source: Internet
Author: User
Tags min relative

Basic ideas

First consider the outer setting of a container div,id set to #container, so that his height is the height of the browser window, and then the #footer Div is set to #container the child Div, and use the absolute positioning method, so that he fixed to the bottom of the #container, To achieve the desired effect.

Click here to see the case page effect. Changing the height and width of the browser, you can see the footer part of the effect.

Code implementation

Let's consider the HTML structure first, the HTML code for this demo page is very simple.

<div id="container">
<div id="content">
<p>请改变浏览器窗口的高度,以观察footer效果。</p>
<p>这里是示例文字,………,这里是示例文字。</p>
</div>
<div id="footer">
</div>
</div>

And then set the CSS,

body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#container {
min-height:100%;
position: relative;
}
#content {
padding: 10px;
padding-bottom: 60px;
/* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}

1: First of all, to set the HTML and body elements of height (height property) is 100% (line 5th), so that the root element to ensure that the height of the entire browser window, and then the next to the height of the #container to fill the entire browser window. As for why to set the HTML and the body elements at the same time, because Firefox and IE think the root element is not the same, so here they are set up.

2: Then set the height of the #container to 100% (line 8th), but note that the "Min-height" attribute is used instead of the normal height attribute, because we have to take into account that if the content of the #content increases, His height exceeds the height of the browser window, so if the height of the #container is still 100%, the #footer will still be positioned at the bottom of the window, obscuring the contents of the #content. The effect of using the Min-height property is to make the height of the #container "at least" the height of the browser window, and when the content inside it increases, so does his height, which is what we need.

However, it is necessary to note that in Firefox and IE7, the Min-height attribute is supported, while the Min-height attribute is not supported in IE6, but "fluke" is, in IE6, the Min-height attribute is interpreted as the height attribute, but I The effect of the height property in E6 is the effect that min-height should have, that is, in IE6, the height of the child div will support the height of the parent div. So it just can be achieved in IE6, IE7 and Firefox can be the correct implementation of our desired effect.

3: Next, set the #container to relative positioning (line 9th) in order to make him the #footer positioning datum within it, which is called "the nearest ancestor element".

4: Then set the #foooter to absolute position (line 17th) and place it at the bottom of the #container (line 18th).

5: But note that if we post #foooter at the bottom of the #container, he actually overlaps the #content div above, in order to avoid overwriting the contents of the #content, we set the lower side of the Paddi in the #contetn Ng, so that the value of the padding-bottom equals the height of the #footer (line 13th), you can guarantee to avoid overwriting #content text, this height of the calculation note in the comments in the code given in the calculation method (line 14th).

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.