I've successfully implemented a footer with several buttons that remains positioned at the bottom of the page, 60px above the very bottom, regardless of the content or window size. The CSS I'm using is as follows:
#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%;
}
However, when resizing the window, the container becomes scrollable but the footer remains fixed at 60px from the bottom of the page, causing it to overlap with controls inside the container. I want the footer to stay at the bottom and only become visible when scrolling all the way down to the bottom of the page. Is there a solution for this issue? Any help would be greatly appreciated!