{"id":37576,"date":"2016-07-21T13:01:16","date_gmt":"2016-07-21T07:31:16","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=37576"},"modified":"2017-09-12T12:43:35","modified_gmt":"2017-09-12T07:13:35","slug":"how-to-consistently-push-footer-at-the-bottom-using-css","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-consistently-push-footer-at-the-bottom-using-css\/","title":{"rendered":"How to consistently push footer at the bottom using CSS?"},"content":{"rendered":"

If an HTML page has very less content then the footer is normally seen\u00a0halfway up the page leaving a blank space below it. This can look bad on a large screen. In such a scenario\u00a0web designers are asked to push footers down to the bottom, but at times designers aren’t able to achieve this as they are unaware about certain CSS tricks.<\/p>\n

How to push footer down through CSS?<\/strong><\/p>\n

Actually it’s not so complicated. This is done by using a mix of HTML and CSS.<\/p>\n

HTML Structure:<\/strong><\/p>\n

[java]
\n<div id="wrapper">
\n\t<div class="header"><\/div>
\n\t<div class="main-content"><\/div>
\n\t<div class="footer"><\/div>
\n<\/div>
\n[\/java]<\/p>\n

You would only require\u00a0four div structures to achieve this. The first is wrapper which covers\u00a0the entire\u00a0page content. The second wrapper has\u00a0three divs such as\u00a0header, main content and footer. That’s it, the magic happens for this only by CSS.<\/p>\n

CSS:<\/strong><\/p>\n

[java]
\nhtml,
\nbody {
\n margin:0;
\n padding:0;
\n height:100%;
\n}
\n#wrapper {
\n min-height:100%;
\n position:relative;
\n}
\n.header {
\n background:#ff0;
\n padding:10px;
\n}
\n.body {
\n padding:10px;
\n padding-bottom:60px; \/* Height of the footer *\/
\n}
\n.footer {
\n position:absolute;
\n bottom:0;
\n width:100%;
\n height:60px; \/* Height of the footer *\/
\n background:#6cf;
\n}
\n[\/java]<\/p>\n

And following is the CSS rule for IE 6 and IE 5.5:<\/p>\n

[java]
\n#wrapper{
\n height:100%;
\n}
\n[\/java]<\/p>\n

Below is the example image that what is the default behaviour and what will be the desired effect<\/strong><\/p>\n

\"footer-at-bottom\"<\/p>\n

It will also work in the same way for\u00a0iPhones, iPods, iPads and other CSS compatible mobile devices.<\/p>\n","protected":false},"excerpt":{"rendered":"

If an HTML page has very less content then the footer is normally seen\u00a0halfway up the page leaving a blank space below it. This can look bad on a large screen. In such a scenario\u00a0web designers are asked to push footers down to the bottom, but at times designers aren’t able to achieve this as […]<\/p>\n","protected":false},"author":206,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":10,"footnotes":""},"categories":[3429,1],"tags":[3743,3742,3744,3745,3746],"class_list":["post-37576","post","type-post","status-publish","format-standard","hentry","category-front-end-development","category-technology","tag-footer-at-bottom","tag-footer-at-bottom-css","tag-footer-at-bottom-html","tag-footer-at-the-end-of-page","tag-footer-at-the-end-of-page-css"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t