Web page "Footer" part with floating up, in the middle of the page martingale, to the visual effect of great impact, make your page look very bad, especially now more and more widescreen, this phenomenon is more common, this article will introduce two solutions, need to understand the friend can refer to the next
As a page you must have encountered: When an HTML page contains less content, the "footer" part of the Web page with the floating up, in the middle of the page martingale, to the visual effect of a great impact, make your page look very bad, especially now more and more widescreen, This phenomenon is more common. So how to fix the "footer" part of the Web page to the bottom of the page forever? Let's take a look at the code below.
This is the first scenario , and there are several
HTML code
Copy CodeThe code is as follows:
<div class= "Container" >
<div class= "Header" > This is the head </div>
<div class= "Page Clearfix" >
<div class= "left" >left sidebar</div>
<div class= "Content" >main content</div>
<div class= "right" >right sudebar</div>
</div>
<div class= "Footer" >footer section</div>
</div>
CSS Code
Copy CodeThe code is as follows:
html,body{margin:0;padding:0;height:100%}
. Container{min-height:100%;height:auto!important;height:100%;/*ie6 does not recognize min-height, such as the above processing */position:relative;}
. Header{background: #ff0;p adding:10px;}
. page{width:960px;margin:0 auto;padding-bottom:60px;/*padding equals the height of footer */}
. Footer{position:absolute;bottom:0;width:100%;height:60px;/*footer height */background: #6cf; clear:both;}
. Left{width:220px;height:800px;float:left;margin-right:20px;background:lime;}
. content{background:orange;width:480px;float:left;margin-right:20px;}
. Right{width:220px;float:right;background:green;}
. Clearfix:after,
. Clearfix:before{content: "";d isplay:table}
. Clearfix:after{clear:both;overflow:hidden}
. Clearfix{zoom:1;}
To implement this footer is always fixed at the bottom of the page, we only need four Div, where Div#container is a container, in this container, we contain the Div#header (head), Div#page (the main part of the page, We can add more div structures to this div, as shown in the code above, Div#footer (footer section)
Let's take a look at the implementation principle of this method:
Div#container container: The Div#container container must have a minimum height (min-height) of 100%, which mainly allows him to maintain a height of 100% in the case of little (or no) content. However, in the IE6 is not supported min-height, so in order to be compatible with IE6, we need to do a certain degree of compatibility of min-height, the specific can look at the previous code, in addition we need to set a div#container in the container "position: Relative "in order to facilitate the elements inside the absolute positioning will not run the Div#container container;
Div#page container: Div#page This container has a very critical setting that requires a Padding-bottom value to be set on this container, and this value is equal to (or slightly greater than) the height value of the footer Div#footer, of course you are in div# Page can use Border-bottom person water-width to replace Padding-bottom, but one thing to note, here you must not use Margin-bottom instead of padding-bottom, otherwise it will not achieve the effect;
Div#footer container: The Div#footer container must be set to a fixed height, in units of PX (or EM). Div#footer also needs to be absolutely positioned, and set bottom:0, so that Div#footer is fixed at the bottom of the container div#container, so that we can achieve the effect we said earlier, when the content is only a little, div# The footer is fixed at the bottom of the screen (because Div#container sets a min-height:100%), and when the content height exceeds the height of the screen, Div#footer is fixed at the bottom of the Div#container, which is fixed at the bottom of the page. You can also add a "width:100%" to Div#footer, allowing him to extend the entire page;
Other Div: As for other containers can be set according to their own needs, such as the front of the div#header,div#left,div#content,div#right and so on.
Advantages：
The structure is simple and clear, without JS and any hack can achieve the compatibility of each browser, and also adapt to the iphone.
Disadvantages：
The disadvantage is the need to set a fixed height for the Div#footer container, the height can be set according to your needs, the unit can be PX or EM, but also need to be div# The page container's Padding-bottom (or border-bottom-width) setting size is equal to (or slightly greater than) the height of the div#footer to function correctly.
Method Two：
This method is to use footer Margin-top negative value to achieve footer forever fixed at the bottom of the page effect, below we specifically see how to achieve.
HTML code
Copy CodeThe code is as follows:
<div id= "header" >header</div> <div id= "Container" >
<div id= "page" class= "Clearfix" >
<div id= "left" >left sidebar</div>
<div id= "Content" >main content</div>
<div id= "right" >right sidebar</div>
</div>
</div>
<div id= "Footer" >footer</div>
CSS Code
Copy CodeThe code is as follows:
html,body{height:100%;margin:0;padding:0;}
#container {Min-height:100%;height:auto!important;height:100%;}
#page {padding-bottom:60px;/* is equal to or greater than footer height *//*border-bottom-width:60px, border width can also */}
#header {padding:10px;background:lime;}
#footer {position:relative;margin-top:-60px;/* equals footer height */height:60px;clear:both;background: #c6f;}
#left {width:18%;float:left;margin-right:2%;background:orange;}
#content {width:60%;float:left;margin-right:2%;background:yellow;}
#right {width:18%;float:right;background:green;}
. Clearfix:after{visibility:hidden;height:0;font-size:0;display:block;content: ""; clear:both;}
* HTML. Clearfix{zoom:1;} /* IE6 */
*:first-child+html. clearfix{zoom:1;}/* IE7 */
The code above is the most basic HTML code, and you also found that Div#footer and Div#container are peer relationships, unlike method one, div#footer inside the Div#container container. Of course, you can also add content to the Div#container container according to your needs, such as a three-column layout and a header section.
Method One and method two are exactly the same, for example, 1-3 three points in method one, in method two are the same, in other words, method Two also need to set the html,body height to 100%, and reset margin,padding 0; the other div# Container also need to set up min-height:100%, and handle the Min-height compatibility problem under IE6, and its three need to be in div# A padding-bottom or Border-bottom-width value is set on the page container equal to the Div#footer height value (or slightly greater than). The difference between the two methods is:
Div#footer is placed outside the Div#container container, that is, the two are sibling relationships, and if you have new elements that need to be placed in the same class as the Div#container container, you will need to position this element absolutely, otherwise it will destroy the div# The min-height value of the container container;
Div#footer the negative value of the Margin-top setting, and this value is equal to the height of div#footer, and also to the Padding-bottom (or border-bottom-width) value of the Div#page container.
Advantages：
The structure is simple and clear, without JS and any hack can achieve compatibility under each browser.
Disadvantages：
To set a fixed value for footer, you cannot make the footer part adaptive to height.
div footer Tag CSS Implementation is fixed at the bottom of the page
