During the development of Web pages to achieve, you may encounter such a scenario: the footer footer fixed at the bottom of the page, if the body of the page can not fill the screen height, footer located at bottom of the screen ; if the body of the page beyond the screen height, the footer is always at the bottom of the page .
Scene schematic below,
So how will the footer is always fixed at the bottom of the page it?
Generally, there are two ways to achieve this purpose, one is using only css with specific techniques and structures html; js code other is to use the operating element dom.
This article describes three ways to use css techniques to achieve this purpose.
the first method
The first principle of the method is that
Page
html,body,containermust satisfy , so that you can fill the screen (page), using relative positioning , fixed at the bottom of the page, the page body of the container must be easily set a greater than or equal to the height , for the purpose to the height calculated in container, so that it will always be fixed at the bottom of the page.height:100%footerbottom:0pagefooterpadding-bottomfooterpagefooter
We first look at the html structure,
<div id="container">
<div id="header">Header Section</div>
<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 id="footer">Footer Section</div>
</div>
The only caveat here is that footer the container is container a container inclusive.
Then look css code,
html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等于footer的高度*/
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*脚部的高度*/
background: #6cf;
clear:both;
}
/*=======主体内容部分省略=======*/
From the css code, we see that the body of the page page to set up a , and the height is the same. It can not be used here instead .padding-bottom footer margin-bottom padding-bottom
Complete jsfiddle instances here .
This solution has a drawback: footer must be fixed height, page must be greater than or equal to the height of a set of . If not fixed height, or need to do adaptive footer, then this program not for you.padding-bottom footer
The second method
The second method is the principle:
footerContainer andcontainereasy no longer contains the relationship, the two are at the same level. Tohtml,body,containerheight of the container are set to 100%, thatcontainerhas occupied the entire page is full, and then re-addedfootercontainer,footermust exceed the bottom of the page, and the page will appear scroll bar. So, we have tofooteradd a negative value of the container pulled from off-screen. The negative value of the same height.margin-topfootermargin-topfooter
We first look at the html structure,
<div id="container">
<div id="header">Header Section</div>
<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 section</div>
Here it can be seen, footer the container and container the container are siblings.
Look css code
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#page {
padding-bottom: 60px; /*高度等于footer的高度*/
}
#footer {
position: relative;
margin-top: -60px; /*等于footer的高度*/
height: 60px;
clear:both;
background: #c6f;
}
/*==========其他div省略==========*/
We give footer container set a negative value of , the purpose for the container pulled from off-screen. To the container to add purpose to the height of the container is calculated in size, so that when the page that appears scroll bar behavior will be correct.margin-top footer page padding-bottom footer page
Complete jsfiddle instances here .
The disadvantage of this scheme with the first method is the same.
The third method
The third principle of the method is that
No content using a
pushcontainer tofootercontainer to push the very bottom of the page, but also tocontainerset a negative value , that the container and the height of the container is the same. In fact, this method with the second method is relatively close. But it is more than a meaningless vessel.margin-bottommargin-bottomfooterpushpush
We look at the relevant html structure,
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div>
<div class="push"><!-- not put anything here --></div>
</div>
<div id="footer">Footer Section</div>
css code
html,
body{
height: 100%;
margin:0;
padding:0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
}
.push,
#footer {
height: 60px;
clear:both;
}
/*==========其他div效果省略==========*/
Complete jsfiddle instances here .
Disadvantages: compared to the preceding two methods, the use of a multi- container, this approach limits the same part of the height, can not achieve the effect of highly adaptive.div.push footer
to sum up
Three methods are described previously using specific html css and a mating structure to achieve. It's more lightweight, they are able to perform well on the new versions of modern browsers. But in this way must use css required footer height is fixed, because the page is the main body of the container on the hands and feet to reach the height of footer footer is always fixed at the bottom of the purpose.
Css manner except addition, there is a quick rough fierce manner, it js code to operate directly dom element. This way is not limited to html, and in theory compatible with all browsers. However, this method I personally do not recommend, because the direct use js to manipulate dom is a very heavy behavior is not conducive to html, css performance, and occurs when the page resize, because the page is redrawn often cause some flickering or card pause.
Reference List
- How to use Sticky Footer Code (allow footers method close to the bottom of the page)
- Exploring Footers
- Make the Footer Stick to the Bottom of a Page
- How to fix the footer at the bottom of the page
End. All rights reserved @gejiawen .
During the development of Web pages to achieve, you may encounter such a scenario: the footer footer fixed at the bottom of the page, if the body of the page can not fill the screen height, footer located at bottom of the screen ; if the body of the page beyond the screen height, the footer is always located at the bottom of the page
Transfer from: http: //ju.outofmemory.cn/entry/194786