Why it is diffirent?

So most of the demo like this just have fixed height or changing padding or height for diffirent screen sizes. But in this we are using a simple custom code so that we can set a padding bottom to the body dynamically when the footer height changes. So whatever the footer height is will be added to the body bottom as space. If the size of the footer is 300px then body padding-bottom will be 300px. If footer height is 100px then body padding-bottom will be 100px. This is the demo.

<script>
$('document').ready(function() {    
$('body').css({'padding-bottom': $('#footer').innerHeight()});});
</script>