Search code examples
csssticky-footer

Sticky Footer Issue - Scrollbar appearing on smaller screens

I'm using http://www.cssstickyfooter.com/ for the footer of two sites I'm working on. Seems to be fine on a large monitor, no issues at all.

However when going to a smaller monitor and shrinking the page size down I'm getting a scroll bar at the bottom of the screen and the Footer is not stretching the full width of the screen.

A working example of this issue is here

Just shrink the screen size down and you can see the issue.

Any ideas on how I can fix this. It has also happened on this site I've made

Thanks in advance.

Solution

  • You need to set a min-width for your footer. Currently the footer is correctly adjusting itself to the size of your screen, even if the rest of the content no longer fits on the screen and scrollbars are added.

    Find the width at which scrollbars appear and set your footer's min-width to that. Example:

    .footer {
    min-width: 1000px;
}