Stick Footer bottom of the page depending of content

Question

I have a footer here http://codepen.io/anon/pen/EKmXMR

and I would like it to stick at the bottom of the page when the content is not enough and if the content take more than 100% height of the screen, I would like it to be at the bottom of the content. The thing is that I tried a lot of "Sticky Footer" solution with CSS3 like position absolute here http://cbracco.me/cs...-footer-effect/ but it doesn't work for me.

Do you know what's wrong?

.footer{
width:100%;
height: 50px;
text-align:center;
/*position:absolute;*/
color: white;
z-index: 2;
/*bottom: 0;
right:0;
left:0;*/
background-color:black;
line-height:50px;
}
 .footer a {
 color: inherit;
 text-decoration: none;
 }

Answer 1

One solution I found is to add a padding to the wrapper (page) :

.wrapper{
    min-height: 100%;
    padding: 0 0 50px;
    float: left;
    position: relative;
    box-sizing: border-box;
}

The padding is 50px bottom for my case. After that the height of the footer is equal to the padding.

.footer{
    width: 100%;
    height: 50px;
    text-align: center;
    position: absolute;
    color: white;
    bottom: 0;
    left: 0;
    background-color: black;
    line-height: 50px;
}

See an example on my own website

Thank you