css - 100% 宽度的 bg 图像不在水平滚动上延伸

标签 css

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

基本上,当您设置了最小宽度并且视口(viewport)处于该约束之下时,会出现一个水平滚动条。几乎与您所期望的一样,但是当您水平滚动时,所有应该延伸到整个页面宽度并且背景图像/颜色与正文不同的元素都不会延伸。如果您调整视口(viewport)的大小,它似乎会跟上。

这是一个已知问题吗?你可以在很多网站上看到它,例如 http://gowalla.com

有什么想法吗?

最佳答案

我设法通过向 body 元素添加最小宽度来解决 gowalla 和 stackoverflow 上的这个问题(它发生在页脚上)。不过,我认为在您自己的网站上,最好将其应用于包含页面所有内容(包括页脚)的包装器 div。

您需要将其值设置为内容的最小固定宽度,因此如果您的主要内容 div 设置为 960px 宽,那么这可能就是您想要的(但您可能需要调整以考虑额外的边距/边框等)。

这是一个例子:http://jsfiddle.net/qUyp2/

关于css - 100% 宽度的 bg 图像不在水平滚动上延伸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3042979/

相关文章:

html - 带有显示 block 的 Div 导致内联 block 父级越界

javascript - js 中的 CSS calc()

css - :nth-letter pseudo-element is not working

css - Bootstrap 3 响应式桌面和移动布局

css - 如何在不单击激活它的链接的情况下始终显示纯 HTML5/CSS 模式窗口?

css - 如何将绝对定位的DIV放在SPAN或相对定位的DIV后面?

html - 有没有更好的方法来完成这个看似简单的三栏布局呢?

CSS - 按设定比例填充

javascript - 当我打开模式时添加下一个和上一个按钮

html - 标签的 css 但不是包含图像的标签