CSS: фон отсутствует при горизонтальной прокрутке

ОК, у меня есть фоны, настроенные следующим образом:

HTML

<div id="container">
    <div id="content">
    CONTENT HERE
    </div>
</div>

CSS

#container
{
    background:url(image.gif);
}
#content
{
    width:800px;
    margin:auto;
}

Таким образом, идея состоит в том, чтобы контент находился в поле размером 800 пикселей, а фон для контента занимал 100%, у меня такая же настройка для разных областей, таких как верхний и нижний колонтитулы и основные части страницы. Таким образом, все они имеют разный фон, охватывающий 100%, в то время как содержимое находится в пределах поля 800 пикселей.

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

Вы можете увидеть это здесь: Clicky

Есть ли способ исправить это?

Спасибо!!


css background
person JD Isaacks    schedule 11.03.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Поскольку вы используете область контента с фиксированной шириной, почему бы не задать фиксированную ширину вашему #container (фактически #inner_content_container на вашем сайте)? Поскольку ваше изображение имеет ширину 824 пикселя, я просто использовал FireBug, чтобы сделать ваш контейнер такой ширины, и ваша проблема исчезла.

ПРИМЕЧАНИЕ. Когда вы сделаете это, вам также нужно будет указать контейнеру автоматическое поле и установить скрытое переполнение, если вам не нужны полосы прокрутки.

#container {
  margin:auto;
  overflow:hidden;
  width:824px;
}
person Randy Simon    schedule 11.03.2010
comment
Это сделало бы область просмотра шириной 824, чтобы не отображались полосы прокрутки, я хочу, чтобы у людей с разрешением 600x800 не было горизонтальных полос прокрутки при максимизации. Но вы подали мне идею, которая исправила это: для верхнего и нижнего колонтитула я установил для содержимого тот же фон, что и для контейнера, а для основного раздела я просто установил белый фон. Это исправило :) - person JD Isaacks; 11.03.2010
comment
Я думаю, вы могли бы также использовать переполнение: скрытый (я обновил свой ответ). В любом случае, рад, что у вас все получилось. - person Randy Simon; 11.03.2010

arrow_upward
0
arrow_downward

Я понял (или кажется), что при прокрутке «открывается» только фон #content, а не фон #container. Итак, что я сделал, так это установил #content, чтобы он также имел тот же фон, что и #container. Это устраняет проблему без необходимости отображать полосу прокрутки для неконтента.

person JD Isaacks    schedule 11.03.2010
comment
@easwee вы не можете принять свой ответ, пока не пройдет 2 дня с тех пор, как вы задали вопрос. Я также предпочел бы отметить чужой ответ, а не свой собственный. Поэтому я хотел бы дать кому-то возможность либо дать лучший ответ, чем мой, либо расширить свой ответ, чтобы я мог вместо этого отметить их. :) - person JD Isaacks; 11.03.2010