Изображения, не заполняющие упаковку <div>элементов

Question

Проблема:

Итак, у меня есть эта веб-страница: http://a.yfrog.com/img610/3543/p4.png

У меня есть несколько изображений, которые наслоены вместе, чтобы создать градиент фона, но по какой-то причине два боковых градиентане заполняют всю страницу.Все градиенты находятся в элементах, которые обертывают всю страницу.Если я установил переполнение одного из элементов div на переполнение: auto;Я могу прокрутить этот div до длины страницы (которую я установил на 5000 пикселей для тестирования), но только в окне, где вы видите эту небольшую обрезку, и, насколько я могу судить, он делает это во всех браузерах.В чем проблема?И для дальнейшего разъяснения, я говорю о том, как градиенты по сторонам внезапно прекращаются.

---

CSS:

#super_wrapper { height:100%; }
#page_bg_top {
  background:url(../images/body/top_shadow.png) repeat-x top;
  height:400px;
}
#page_bg_topleft {
  background:url(../images/body/top_left.png) no-repeat top left;
  height:300px;
}
#page_bg_topright {
  background:url(../images/body/top_right.png) no-repeat top right;
  height:300px;
}
#page_bg_left {
  background:url(../images/body/left_shadow.png) repeat-y left;
  height:100%;
}
#page_bg_right {
  background:url(../images/body/right_shadow.png) repeat-y right;
  height:100%;
}

HTML:

<div id="super_wrapper"><div id="page_bg_top"><div id="page_bg_topleft"><div id="page_bg_topright"><div id="page_bg_left"><div id="page_bg_right">
... Page Body
</div></div></div></div></div></div>

Answer 1

Ну, похоже, что произошло какое-то наследование высоты.Элемент внутри области <div> имеет высоту, установленную вручную, и когда я удалил высоту из этого элемента, фон заполнил всю страницу.Я не имею ни малейшего понятия, почему это произошло или что вызвало это.

Answer 2

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

Прежде всего, есливы хотите, чтобы эти градиентные тени слева и справа охватывали высоту документа, вам нужно, чтобы элементы div с фоновыми изображениями находились снаружи всего, кроме оболочки.

Итак, вот правильная разметка:

<div id="super_wrapper">
    <div id="page_bg_left">
        <div id="page_bg_right">
            <div id="page_bg_top">
                <div id="page_bg_topleft">
                    <div id="page_bg_topright">

                    ... Page Body
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Далее вам нужно дать этим двум элементам div «overflow: hidden», чтобы фоны повторялись до полной высоты содержимого.детские дивы

Как это:

#page_bg_left {
  background:url(../images/body/left_shadow.png) repeat-y left;
  height:100%;
  overflow: hidden;
}
#page_bg_right {
  background:url(../images/body/right_shadow.png) repeat-y right;
  height:100%;
  overflow: hidden;  
}