Xpoint
   [напомнить пароль]

height=100% - проблема с фоном

Метки: [без меток]
2009-04-16 18:50:19 [обр] August[досье]

Здравствуйте.
Имеется код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html { height: 100%; background: #efe4c2 url(2ECB45BB.gif) fixed }
body { height: 100%; margin: 0; padding: 0; background: url(shadow-body.png) repeat-y top center }
div.body { height: 100%; width: 900px; margin: auto; background: #fff url(gradient-bg.png) repeat-x }
div.body2 { height: 100%; background: url(v-line.png) repeat-y left; padding-left: 300px }
</style>
</head>

<body>
<div class=body>
<div class=body2>
assdf sdf asdf sadf sdf sadf gdf gsdf<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
</html>

В странице используется 4 фоновых изображения (видно на примерах), проблема в том, что при большом контенте вместе со скроллингом уезжает и фон.
Пример с маленьким контентом, тут все ОК - http://august.by.ru/page2.html
Привер с большим контентом, проблема с фоном - http://august.by.ru/page1.html

Бился и так и сяк - не выходит каменный цветок. Подскажите как решить проблему?

спустя 22 часа [обр] Иван Неретин(0/8)[досье]
Пожалуй, не стоило прикручивать фон прямо к элементу html.
спустя 2 часа 58 минут [обр] Илья Cтpeльцын aka SelenIT(15/171)[досье]

August[досье], это стандартная (сорри за невольный каламбур;) проблема — раз для body задана высота в 100% от экрана (через посредника в "лице" html), то столько он и занимает, а всё, что сверх — "выпирает" за нижнюю границу. Чтобы этого не происходило, вместо height нужно указывать min-height (для всех браузеров, кроме IE6), но тогда не получится унаследовать эту высоту для вложенного элемента. Как компромиссный выход, предлагаю следующее: для HTML всё оставить как есть, у body убрать фон совсем, внешнему диву задать min-height: 100%; _height: 100%; вместо height:100% и вертикально повторяющийся фон одной картинкой, а внутреннему диву не указывать высоту вообще и положить фоном градиент на всю ширину вместе с куском вертикальной полосы.

Иван Неретин[досье], с этим-то как раз проблем не бывает, AFAIK.

спустя 14 часов [обр] August[досье]
Илья Cтpeльцын aka SelenIT[досье] прочел ваш пост несколько раз, но так и не дошло, как делать. Попытки получить желаемый результат не привели к успеху. Еще необходимо учитывать, что страница должна быть растянута на 100% с маленьким контентом.
Powered by POEM™ Engine Copyright © 2002-2005