Footer should stay at the bottom and remain in a fixed position even if the browser resizes

I have a footer with few buttons which stays at the bottom of the page at a height of 60px from the bottom of the page no matter what the content above is or how much the size of the window is....that is working fine. Here is the CSS I am using:

#container
{
    min-height: 100%;
    height: 100%;
    position: relative;
}
#footer
{
    posit开发者_运维知识库ion: fixed;
    bottom: 0;
    width: 100%;
    height: 60px; /* Height of the footer */ 
}
#wrap
{
    min-height: 100%;
    max-height: 100%;
}

NOW, the problem is if I am resizing the window the container becomes scrollable (all the controls inside the container scrolls as per expected) but the footer still remains at 60px from the bottom of the page and eventually overlaps the container controls. I want the footer to remain at the bottom and should be visible only when I scroll down till the bottom of the page...Hope I am clear with the question!!!

Could someone please help!!!

@pronay sharma , may be you want an sticky footer.

checks these links:

Sticky Footer CSS Problems

http://css-tricks.com/snippets/css/sticky-footer/

http://www.cssstickyfooter.com/

Problem with CSS Sticky Footer implementation