Bootstrap Sticky footer, said specifically is "the fixed height of the footer close to the bottom of the page." Because the actual situation of the project and the template are different, so the reference template, small series can not ensure the rapid completion of the "sticky footer" effect, then still want to share this tutorial, write bad also please heroes Haihan!
First, the page effect
The page is very simple, pay attention to the bright line for Firefox edge, you can clearly see that the footer gray part immersed in the bottom of the page.
Second, the example explanation
①, code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
②, page body layout
<body> <div id= "wrap" > <div class= "container" > </div> <div id= "Push" ></div> </div> <div class= "Footer" > </div> </body>
The first level element in the body, two Div, respectively wrap and footer
The second level element, two Div, is container and push (if you forget to push this div,ok, your page will be confused when zooming)
The elements listed above are naturally sticky footers essential.
③, CSS Analysis
html,body {
height:100%;
}
#wrap {
min-height:100%;
Height:auto!important;
margin:0 auto-200px;
}
#push
height:200px;
}
. Footer {
border-top:1px solid #e5e5e5;
Color: #777;
PADDING:19PX 0;
Background-color: #f5f5f5;
}
The height of the html,body must be 100%, which is full of browser window height
#wrap Div min-height must be 100%,height, it automatically adapts.
The key point is that the outer margin of the margin,top is 0, while the outer margin of the bottom is -200px.
Note that it is -200px, theoretically the footer height (you can firebug debug the best height) negative, which is also critical! Why should it be negative? Because the height of the warp is originally 100%, for negative words, you can set aside for footer to show the full height, otherwise footer will appear in the bottom of the page scroll bar.
#push元素, the page full display, it seems not to see the effect of push elements, but when you zoom in the page, if there is no push,footer elements will coincide with the elements in the container, the diagram is also explained, then its specific role?
By Firebug We select the push Div, we can see that it contains exactly the contents of the footer element, which will prevent the footer and container elements from being coincident.
So, the above key point is finished, you just notice the distribution of the following elements, you can easily handle bootstrap sticky footer effect!
Warp
Push
About this article to introduce you to the bootstrap sticky footer effect Small series to introduce so many people, I hope to help you!
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
