The basic idea is
to first consider setting up a container div in the outer layer, with the id set to #container, so that its height is the height of the browser window, and then set the #footer div as a child div of #container, and use absolute positioning to make it He pins to the bottom end of the #container to achieve the desired effect.
Click here to view the case page effect. Change the height and width of the browser to see the effect of the Footer part.
Code implementation
: First consider the HTML structure. The HTML code of this demo page is very simple.
<div id="container">
<div id="content">
<h1>Content</h1>
<p>Please change the height of the browser window to observe the footer effect. </p>
<p>Sample text goes here,………, sample text goes here. </p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
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, set the height (height attribute) of the html and body elements to 100% (line 5). This will first ensure that the height of the root element fills the entire browser window, and then the height of #container can fill the entire browser. browser window. As for why the html and body elements are set at the same time, it is because Firefox and IE consider the root element to be different, so they are set here.
2: Then set the height of #container to 100% (line 8), but note that the "min-height" attribute is used here instead of the ordinary height attribute. This is because we have to consider that if # If the content in content increases and its height exceeds the height of the browser window, then if the height of #container is still 100%, #footer will still be positioned at the lower end of the browser window, thus covering #content content in. The purpose of using the min-height attribute is to make the height of #container "at least" the height of the browser window. When the content inside it increases, its height will also increase. This is the effect we need. .
However, it should be noted that in Firefox and IE7, the min-height attribute is supported, while in IE6, the min-height attribute is not supported. However, the "coincidentally" is that in IE6, the min-height attribute will be interpreted as the height attribute. , but the effect of the height attribute in IE6 is the effect that min-height should have originally. That is to say, in IE6, the height of the child div will increase the height of the parent div. So this can exactly achieve the effect we want in IE6, IE7 and Firefox.
3: Next, set #container to relative positioning (line 9), in order to make it the positioning reference of #footer inside it, which is the so-called "most recently positioned ancestor element".
4: Then set #foooter to absolute positioning (line 17) and paste it at the bottom of #container (line 18).
5: But please note that if we paste #foooter at the bottom of #container, it will actually overlap with the #content div above. In order to avoid covering the content in #content, we set it in #contetn By removing the padding on the lower side and making the value of padding-bottom equal to the height of #footer (line 13), you can ensure that the text of #content is avoided. When calculating this height, pay attention to the calculation method given in the comments in the code ( line 14).