CSS Sticky Footer

HTML

<div class="page">  
shljkfg<br>
sdfgkjdfg<br>
dlfgjkdfg<br>
dlfgfdg<br>
dslfgjkdjfg<br>
sdflgjfkdg<br>
dlfjkgsjkdfg<br>
ldfjgsklfdg<br>
shljkfg<br>
sdfgkjdfg<br>
dlfgjkdfg<br>
dlfgfdg<br>
dslfgjkdjfg<br>
sdflgjfkdg<br>
dlfjkgsjkdfg<br>
ldfjgsklfdg<br>
shljkfg<br>
sdfgkjdfg<br>
dlfgjkdfg<br>
dlfgfdg<br>
dslfgjkdjfg<br>
sdflgjfkdg<br>
dlfjkgsjkdfg<br>
ldfjgsklfdg<br>
shljkfg<br>
sdfgkjdfg<br>
dlfgjkdfg<br>
dlfgfdg<br>
dslfgjkdjfg<br>
sdflgjfkdg<br>
dlfjkgsjkdfg<br>
ldfjgsklfdg<br>
</div> 
<div class="page-footer">
</div>

CSS

*, *:before, *:after {
    /* Fix the box model to include padding */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    position: relative;
}

.page {
    min-height: 100%;
    position: relative;
    margin-bottom: -150px;
    padding-bottom: 150px;
}

.page-footer {
    background-color:#222;
    min-height: 150px;
    position: relative;
    z-index: 1;
}