есть у меня страница с примерно такой структурой:
<html><body>
<div id="all"></div>
<div id="footer"></div>
</body></html>
К ней полагается следующий css:
html, body {
height: 100%;
}
#all {
min-height: 100%;
}
* html #all {
height: 100%;
}
#footer {
clear: both;
height: 136px;
margin-top: -136px;
}
Такая схема применена для того, чтобы подвал всегда был снизу, даже если контента на странице мало.
Теперь встала задача разместить на странице три фоновых изображения. Одно равномерное текстурное по всей странице, ещё одно - специфичная текстура для верхнего края документа, и ещё одно - декоративный элемент в нижнем левом углу.
Сразу напрашивается решение - разместить картинки фоном для html, body и #all.
Но дело в том, что высота всех этих трёх элементов высчитывается из высоты окна браузера, и соответственно фоновый рисунок, который должен быть в нижнем левом углу страницы, размещается в нижнем левом углу окна вне зависимости от того, продолжается ли текст далее.
Кстати, наблюдаем тот самый редкий случай, когда оригинальное видение css в браузерах MSIE (5.0, 5.5, 6, 7 в этом плане оказались одинаковы) пошло на пользу - в IE фоновое изображение на нужном месте.
Результаты моих изысканий находятся здесь:
http://fvsr.ru/highway/Вот каким бы образом разместить фон в нижнем левом углу для всех браузеров?
