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

Question

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

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

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

Есть идеи?

Answer 1

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

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

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

Answer 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;
}

Работает!

Answer 3

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

Answer 4

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

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

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

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 }

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

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