Проблема CSS-дизайна изображения

Question

Это тестовый сайт, над которым я работаю: http://test.pafo.net/

Как видите, он разрезает среднюю линию пополам, и я пытаюсь разобраться, почему он это делает.Цвет фона тела предназначен только для тестирования.

Идея макета:

<div> - entire box
  <div /> - top (image with the start line)
  <div> - content
    <div> - left (test 2 on the page)
    <div> - middle (this is 12px in width and only has the line in it)
    <div> - right (menu on the page)
  </div>
  <div> - bottom
    <div> - left (copyright)
    <div> - right (end of the line)
  </div>
</div> - end box

Еще одна вещь - Firefox.Если у меня есть пустой div (как средний div выше), мне нужно добавить пробел в нем для Firefox, чтобы показать его.Если у меня ничего нет, Firefox не покажет.

Answer 1

Вы можете решить проблему, поместив повторяющееся изображение в ваш site_page класс CSS, так как он имеет необходимую вам высоту:

.site_page {
    background:url("../images/bg/bg_main_middle.png") repeat-y scroll 788px 0 #FFFFFF;
}

Затем вы можете избавиться от site_middle div..

Answer 2

.site_middle {
    height:100%;
}

Сто процентов от чего?

Процент высоты (для непозиционированных элементов) относительно родительского элемента, site_page, который равен height: auto.Таким образом, высота родителя - это общая высота его дочерних элементов, которая зависит от его собственной высоты, которая зависит от дочерней высоты, которая зависит от родительской высоты ...

CSS устраняет этот тупик на говоря , что процентные высоты относительно auto игнорируются, т.е.они также auto.Вот почему вы получаете элемент, высота которого равна размеру nbsp, который вы поместили в него (и высота которого равна нулю, когда вы ничего не кладете в него).

Если вы хотитеИзображение, повторяемое вдоль стороны элемента site-left, сколь бы длинным оно ни было, используйте правое фоновое изображение на элементе этого вместо создания дополнительного элемента для него.