Как вы понимаете, полоски должны продолжать идти до самого низа страницы, какой длинной бы она ни была. Для этого сразу в тело документа вставляем 2 элемента DIV (один в другом, во внутреннем вся остальная страница). Первое, что приходит на ум, это просто добавить "height: 100%" к HTML, BODY, #DIV1 и #DIV2. Это решает проблему, но только пока контент страницы меньше высоты окна. Как только появляется прокрутка, мы видим, что фоновое изображение не продолжается до конца страницы, только так, чтобы закрыть первый "экран":
А это совсем не то, что мы хотим. Только IE 6 на данном этапе отображает всё как нам нужно из-за его неверной интерпретации атрибута height. Почему же браузеры, уважающие стандарты, портят картину? Дело вот в чем: они четко воспринимают атрибут height равный 100%, задают элементам высоту окна, а весь контент, который выходит за пределы этой высоты, показывают просто "торчащим", т.е. контейнеры в данном случае не растягиваеются вслед за контентом.
Для исправления ситуации можно сделать вот что. Добавим еще 2 элемента DIV (#DIV3 и #DIV4) внутрь уже имеющихся, зададим для них такой же фон, как у двух первых, но вот высоту в 100% им задавать не будем. В итоге эти внутренние DIV'ы будут растягиваться за контентом и когда высота документа больше высоты окна, мы даже не увидим #DIV1 и #DIV2, но если контента недостаточно для заполнения всей высоты окна, эти DIV'ы будут видны. В итоге, фон будет всегда на полную страницу, что нам и требовалось.
Вот разметка:
<body>И стили:
<div id="div1"><div id="div2"><div id="div3"><div id="div4">
<!-- Здесь содержимое страницы -->
</div></div></div></div>
</body>
body, html {margin: 0; padding: 0; height: 100%;}
#div1,
#div2
{height: 100%;}
#div1,
#div3
{background: url('page-left.png') top left repeat-y;}
#div2,
#div4
{background: url('page-right.png') top right repeat-y;}
А как можно реализовать 100% высоту блоков учитывая что фон в нем это повторяющиеся картинки а не однородный фон?
ОтветитьУдалить