100% ширина bg изображений, не распространяющихся на горизонтальную прокрутку

Я замечаю эту проблему. Я сделал быстрый захват экрана, чтобы продемонстрировать: http://dl.dropbox.com/u/904456/2010-06-14_2323.swf

В основном, когда у вас установлен минимальный набор ширины и окно просмотра находится под этим ограничением, появляется горизонтальная полоса прокрутки. В значительной степени то, что вы ожидаете, но когда вы прокручиваете по горизонтали все элементы, которые, как предполагается, распространяются по всей ширине страницы и имеют фоновые изображения/цвета, отличные от тела, не распространяются. Если вы измените размер окна просмотра, он, похоже, догонит.

Это известная проблема? Вы можете увидеть это на многих сайтах, http://gowalla.com, например.

Любые идеи?

Ответы

Ответ 1

Мне удалось решить эту проблему на gowalla и stackoverflow (это происходит с нижним колонтитулом), добавив минимальную ширину к элементу body. Я думаю, что на вашем собственном сайте было бы лучше применить его к обертке div, которая охватывает ВСЕ содержимое страницы (включая нижний колонтитул).

Вам нужно будет установить для него значение минимальной фиксированной ширины содержимого, поэтому, если ваш основной контент-контент имеет ширину 960 пикселей, то это, вероятно, то, что вы хотите (но вам может потребоваться настроить учетную запись для дополнительных полей/границы и т.д.).

Вот пример: http://jsfiddle.net/qUyp2/

Ответ 2

Я думаю, вы говорите о проблеме, где 100% -ная ширина равна ширине видового экрана, а не содержимому, чтобы фон переместился в ширину содержимого, которое вы должны добавить min-width в div фона, например:

.background
{
    width:100%;
    min-width:960px; /* The width of the content */
    background:url(your-pretty-background.png);
}

.content
{
    width:960px;
}

Это работает!

Ответ 3

Не видя какого-либо связанного кода, я могу только предположить, что нужно сделать.

Я обычно делаю масштабируемые проекты, и вот как бы я подошел к вашей проблеме:

Вот как я обычно настраивал страницу с цветами фона, такими как то, что было показано в видео.

HTML:                              

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

CSS

body { width: 100% }
#main-wrapper { width: 100%; background-color: #000 }
#header-wrapper { width: 100%; background-color: #111 }
#header { width: 200px; margin: 0 auto }
#content-wrapper { width: 100%; background-color: #222 }
#content { width: 200px; margin: 0 auto }
#footer-wrapper { width: 100%; background-color: #333 }
#footer { width: 200px; margin: 0 auto }

Та же концепция может быть применена для фоновых изображений, хотя для поддержания соответствующего эффекта (если это не шаблон, который можно повторить), вам нужно иметь очень широкий образ или по крайней мере тот, который исчезает до некоторого цвета фона. То, что вы сделаете, - поместить изображение в фоновое изображение, а затем просто позиционировать его как верхнюю часть центра, и оно будет расширяться со страницы.

Надеюсь, что это поможет.

Ответ 4

Измените ширину содержимого на 2000 пикселей по сравнению с прокруткой и посмотрите, что произойдет: больше нет фона в прокрученной области