1

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
{
    position: 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!!!

Chandu
  • 81,493
  • 19
  • 133
  • 134
Pronay Sharma
  • 98
  • 1
  • 1
  • 6

1 Answers1

2

@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

Community
  • 1
  • 1
sandeep
  • 91,313
  • 23
  • 137
  • 155
  • Answers consisting of just links (even it's four of them) are discouraged. Links die. Please add a brief description of the solution. – stevenvh Jul 27 '22 at 15:00