Fixed Footer CSS at Bottom of Page without Overlapping Content

I was trying to fix the footer of my blog to the bottom of the page even when there is less content. What usually happens is , if there is less content on the page then , the footer is moved up and leaves a white space at the bottom of webpage that doesn't look good. I wanted to make my page similar to Google homepage where it is full width and i also wanted it to be able to scroll down if there is more content on page . So setting the height of page to 100 percent using css wasn't the option.

I tried a bunch of css suggestions available on the web but most of them didn't work or were just too long and complicated css rules. Finally fixed my footer at the bottom of page without overlapping any content even on smaller screen sized using this simple css rule
#footer { position: absolute; bottom: 0; height:50px; margin-top;2px; }
What this does is that it assigns a absolute position to the footer div with given height and bottom set to zero that makes footer stick to the bottom of the page. If we keep the css at just that then the footer overlaps with the content on smaller screen sizes , to avoid this problem a top margin is set so that the footer div will always be below top content div on smaller screen sizes . If there is enough space , as in desktop , then footer will always stick to the bottom of the page and there will be no white space at the end even if there is no content.
Example of it's implementation can be seen on this blog's homepage where the footer always sticks to the bottom of webpage.