The absolutely relative website footer

Last sunday, a friend of mine ask me a question:
Rafa, how can I make a footer that always is positioned at the bottom of page?

Well, let’s understand what is positioned at the bottom of page means. He wanted a footer that, when the page had not content enough to generate vertical scroll bar, was positioned at the fold line of the page. But, when the page had content enough to generate vertical scroll bar, that same footer should be at the end of document.

At this exact moment you think: How can I make a footer that is, at the same time, absolutely and relatively positioned?

That’s the answer. Evelope all the content of your page in a div. Put a class in that div. Choose the name you prefer. In the code below I use container.

<body>
<div class=“container”>
<div class=“content”>
...
</div>
<div class=“footer”>
...
</div>
</div>
</body>

Now, the CSS:

body, html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
position: relative;
padding: 25px 25px 102px;
min-height: 100%;
box-sizing: border-box;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding:25px;
background: #F1F1F1;
box-sizing: border-box;
}

You can check it live at http://jsfiddle.net/3vgt4q1z/

If you know a better way to do that, share ;)