Colorandy readers present such a question about page layout:
"If there is a footer layer, I want him to be fixed at the bottom of the entire page, do not change with the content of the page, how to set up in CSS?" For example, there are some copyright information inside. Because my whole page content is relatively few, footer always follow content to go up, very not beautiful. ”
This problem if you used a table layout before, it's not difficult, as long as the outermost table height of the page is set to 100%, however, in the specification of the Web Standard, the height of the table is already an repealed attribute and should be avoided, and the use of web standards does not encourage the use of table layouts anymore, So is there a way to use CSS to achieve the footer section of the page is fixed to the bottom of the browser?
Here's how it's going to be implemented.
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 the #container of the child Div, and use the absolute positioning of the way, 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.
1 2 3 4 5 6 7 8 9 ten -one 12 |
<body> <div id= "container" > <div id= "Content" > |
And then set the CSS,
1 2 3 4 5 6 7 8 9 (16) 27 ( est ) |
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;
} |
Key analysis
1: First of all, to set the HTML and body elements of the height (height property) is 100% (line 5th), so that the height of the root element to support the entire browser window, and then the following can make the height of the #container full 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 consider that if the content in #content is increased, His height exceeds the height of the browser window, so if the height of the #container is still 100%, it will cause the #footer to still be positioned at the bottom of the window, thus 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 IE6 type does not support the Min-height attribute, but "fluke" is that in IE 6, the Min-height attribute is interpreted as the height attribute, but IE 6 The effect of the Height property is min-height should have the effect, that is, in IE 6, 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) to make him the #footer anchor in it, the so-called "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 the #foooter at the bottom of the #container, he has actually overlapped with the #content div above, in order to avoid overwriting the contents of the #content, we CONTETN is set in the lower side of the padding, so that the Padding-bottom value equals #footer height (line 13th), you can ensure that you avoid overwriting the #content text, this height of the calculation note in the code in the comments given in the calculation method (line 14th).
6: The remainder has no more technical need to explain. If the reader is not very understanding of the above explanation, you do not understand the basic concept of CSS is not enough, first carefully put the core principles of CSS and basic concepts thoroughly understand, and then look at the code is very easy.
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
