Horizontal Overflow Issue with CSS Sticky Footer

Take a look at http://www.cssstickyfooter.com/ and resize your browser window to < 600px.

Notice how the header and footer elements fall short as the content overflows beyond their width.

Is there any way to prevent this from happening so that when开发者_JAVA技巧 the page scrolls horizontally, the header and footer don't fall short?

---

This issue can be solved by assigning a min-width to the elements that are not stretching along with the rest of the document.

In a DOM inspector on the example site, try adding:

min-width: 960px;

...to the header and footer. Problem solved! I've used this quite a few times with good results across all browsers and devices.

---

What you're seeing is a side effect of making the window more narrow than .main, .foot, and the other layout elements with static width. If they had no widths, or smaller widths, it works just fine.

---

No one actually users a browser with less than 600px width. Even 800x600px is dying with most people, take a look on this survey results: http://www.w3schools.com/browsers/browsers_display.asp

You should only worry with horizontal overflow and other problems for smaller page widths for mobile devices, in this case, a proper mobile browser and specific stylesheets will solve the deal.