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

Question

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

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

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

Любые идеи?

Answer 1

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

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

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

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 } 

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

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

Answer 2

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

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

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

Answer 3

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

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

.content 
{ 
    width:960px; 
} 

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

Answer 4

не

Изменение ширины контента 2000px чем свитка и посмотреть, что происходит: НЕТ фона больше в прокручивать области