Scroll bar
Whenever my site is viewed at a resolution that's not enough to display the full page, a horizontal scroll bar is added. The problem is that my 100% sized div with a background image does not apply that background image to the part that is outside the scrollbar.
This same problem actually appears on Stack Overflow. If you shrink your window so that you have a horizontal scrollbar, you can see that both the div and footer areas do not expand the background image / color.
One way I decided to resolve is to set the div / footer to fixed, but then the content behind the end of the div is lost :-(
Anyone have any suggestions or workarounds? ty!
source to share
When you set an element to 100% width, it will have the same width as its parent. By default, the width of the body tag is equal to the width of the viewport. According to the standard, when the content of the elements has to be large to fit into it, it will overflow. This is what you see.
To get around this, set a minimum width on the body tag. Something like the following, obviously change the width to whatever works for you:
body {
min-width: 960px;
}
source to share