100％宽度bg图像不在水平滚动上延伸 [英] 100% width bg images not extending on horizontal scroll

问题描述

我注意到这个问题。我做了一个快速的屏幕捕获来演示：
http：/ /dl.dropbox.com/u/904456/2010-06-14_2323.swf

I'm noticing this issue. I made a quick screen capture to demonstrate: http://dl.dropbox.com/u/904456/2010-06-14_2323.swf

基本上当你有一个最小宽度设置和视口去在该约束下，出现一个水平滚动条。相当多的你会期望，但是当你水平滚动所有元素，假设扩展到整个页面的宽度，并有背景图像/颜色不同于身体不扩展。如果你调整视口的大小似乎赶上了。

Basically when you have a min-width set and the viewport goes under that constraint, a horizontal scroll bar appears. Pretty much what you would expect, but when you scroll over horizontally all elements that are suppose to extend across the entire width of the page and have background images/colors different from the body do not extend. If you resize the viewport it seems to catch up.

这是一个已知的问题吗？您可以在很多网站上查看，例如 http://gowalla.com 。

Is this a known issue? You can see it on a lot of sites, http://gowalla.com for example.

任何想法？

推荐答案

我设法解决这个问题在gowalla和stackoverflow到页脚）通过向主体元素添加最小宽度。我认为在你自己的网站上，最好将其应用于包含所有页面内容（包括页脚）的包装器div。

I managed to solve this issue on gowalla and stackoverflow (it happens to the footer) by adding a min-width to the body element. I think that on your own site though, it would be better to apply it to a wrapper div that encompasses ALL of the page's content (including the footer).

需要设置它的值到内容的最小固定宽度，所以如果你的主要内容div设置为960px宽，那么这可能是你想要的（但你可能需要调整来考虑额外的边距/边框等）。

You will need to set it's value to the minimum fixed width of the content, so if your main content div is set to be 960px wide, then that's probably what you want (but you may need to tweak to account for extra margins/borders etc).

以下是一个示例： http://jsfiddle.net/ qUyp2 /

这篇关于100％宽度bg图像不在水平滚动上延伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！