CSS Sticky Footer on a Wordpress Page without Content Div

Question

I'm trying to make my footer going down to the end of the page so that it sticks to the bottom.

I tried using a tutorial where I used that css styles to make the footer sticky to the bottom:

    * { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 175px; }  /* must be same height as the footer */

#footer {
        position: relative;
    margin-top: -175px; /* negative value of footer height */
    height: 175px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

I'm trying to make that work now for hours, could someone please check on my problem ?

My project I'm working on

Thanks in advance

Answer 1

In order to achieve the sticky footer effect you have to make some modifications to your HTML and CSS, try the following:

CSS

html, body {
    height: 100%;
}

#colophon:before, #colophon:after {
    content: "";
    display: table;
    zoom:1; /*ie fix*/
}
#colophon:after {
    clear: both;
}
footer {
    display: block;
}

#page {
    height: auto !important;
    margin: 2em auto -175px;
    max-width: 1000px;
    min-height: 100%;
}

HTML

In order for your footer to stick to the bottom you have to separate it from your #page container, like so:

<div id="page" class="hfeed">..</div>
<footer id="colophon" role="contentinfo">...</footer>

And that should do the trick!