问题与100％的背景图像包装消失滚动

时，我有http://www.mrfishermusic.com/问题与100％的背景图像包装消失滚动

你会发现，主包装是1042px（#main）。然后我有#container围绕宽度100％。我是这样做的，因为该页面的背景图像是明智的宽度。

问题是，如果浏览器的水平尺寸很小...比如700px宽（或者小一点，就像在iPhone上），当你滚动到右边时，页眉和页脚都会消失，虽然#main包装保持不变。

我看到一些其他人有这个问题，但我不是一个CSS忍者，所以我不能完全重现解决方案到我的网站 - 我很抱歉，如果这之前已经问过。

谢谢！

来源

2011-06-12 Tallboy

100％的容器大小是相对于视口的，并且在滚动/调整大小时不会更新。您有几种选择：

使用JavaScript来处理视口大小改变
设置头容器的最小像素大小
设置在机身的背景，而不是（因为它不限于视口大小）：background-image: url(background.png); background-position: center top;

来源

2011-06-12 11:00:59 skolima

谢谢你skolima，这是一个巨大的帮助..你介意，如果我问几个更快的问题？ 1.通常所称的脚本是什么？我试过视口调整脚本，但没有发现太多关于它。 2.这是我一起去的方法。它运行得很好，但如果背景超出了1042，那又如何呢？我已经有一个非常高分辨率的身体纹理，我不能将它们合并，或者纹理会像2mb，所以背景图像在身体上是没有问题的。换句话说，没有诉诸JS，是否有另一种方法将div的大小调整为100％到视口？谢谢！ – Tallboy 2011-06-12 21:41:28

这里有一个很好的描述：http://css-tricks.com/full-browser-width-bars/（使用pseudoelements）。 – skolima 2011-06-14 06:19:34

在<body>上设置min-width也可以解决这个问题。

来源

2012-06-07 11:47:48 Claire

我试过你的解决方案，它的工作原理！非常简单..非常有用！谢谢 – 2013-06-01 10:45:18

问题与100％的背景图像包装消失滚动

回答

相关问题