rowlad
Делается так:

<div class="pagemain1">
    ... тут текст страницы, включая охватывающий элемент
        для колонок
    <div class="bottomplaceholder"></div>
</div>
<div class="bottom1">
    ... тут футер
</div>

и CSS-код к нему

HTML,BODY {height: 100%;}
.pagemain1 {min-height: 100%;}
* html .pagemain1 {height: 100%;}
.bottomplaceholder {height: 60px; display: block; clear: both;}
.bottom1 {height: 60px; margin-top: -60px;}

(тут я предполагаю, что высота футера 60 пикселей)
Тут нужно объяснить поподробнее.

HTML,BODY {height: 100%;}

один из золотых ключиков. В режиме строгого следования стандартам обестпечивает для элемента body минимальную высоту в размер окна. Без этого div не будет масштабироваться так как нам надо.

* html .pagemain1 {height: 100%;}

для непонятливого Експлорера >=6.x.
Персонально для сторонников IE: знаю-знаю, есть люди, которые считают, что недопустимо использовать CSS-хаки, даже те, которые проходят проверку валидатором. Вы можете вынести это правило в отдельную таблицу стилей, скрыв ее в HTML-коде за условным комментарием IE.

.bottomplaceholder {height: 60px; display: block; clear: both;}

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

.bottom1 {height: 60px; margin-top: -60px;}

хитрость в том, что элементы, упомянутые на странице позже, прорисовываются поверх пересекающихся с ними предыдущих. Поэтому указав для футера высоту и такое же верхнее поле, только отрицательное, мы можэем быть уверены, что на странице он не займет место под 100%м divом, но прорисуется над ним, даже в Експлорере.
N.B.!Обратите внимание, если Вы хотите задать минимальную ширину страницы, это нельзя делать в body, а нужно делать для двух элементов - 100%ного divа и для футера. Код будет выглядеть так:

HTML,BODY {height: 100%;}
.pagemain1 {min-width: 770px; min-height: 100%;}
* html .pagemain1 {height: 100%;}
.bottomplaceholder {height: 60px; display: block; clear: both;}
.bottom1 {min-width: 770px; height: 60px; margin-top: -60px;}

* (если Вы хотите задать минимальную ширину для Internet Explorer, это делается разными способами, в том числе через не проходящее валидатор expression, но это совсем другая сказка)
N.B.!Обратите пристальное внимание на тот факт, что мы пока что не знаем способа вложить два 100%ных divа друг в друга средствами CSS. Решение через разные значения свойства display, к сожалению, неуниверсальны.
Совместимость рецепта: Internet Explorer 5.0-5.5-6.0 (7.0?), Firefox 1.0-1.5-3.0, Mozilla Suite 1.x, Seamokey, K-Meleon >=0.9, Opera 7.01-8-9.0, Konqueror >=3.4, Safari (?).

rowlad
Да не за что. Не скажу, что мне этот рецепт легко дался. Поиски по интернету дали код, который пришлось дорабатывать. Задача со страницей, на которой должно быть три фона, и все идти сверху до низу, либо, если контента меньше, до конца окна, до сих пор мне не поддается. Есть рецепт для Internet Explorer, но он не работает в современных браузерах. Есть решение через нестандартные свойства Mozilla Firefox, но он работает только на движке Gecko >=1.7. Увы.

В области страницы, которая высотой с окно, если контента меньше, или с контент, если его больше высоты окна, лежит фон. Задается он, допустим, в том самом divе со 100% высотой. Предположим, что должны быть два фона наложены один на другой. Тогда один из фонов привязывается к body. А если третий - его куда? По идее, нужно в основной div поместить еще один, но вот его-то не сделать 100% по высоте. То есть сделать - для IE и для Gecko. Простейший пример: по середине страницы вьется змейка на фоне, слева еще одна змейка, и справа - еще одна. Страница 100% по ширине, то есть не фиксированная.

И подкладывать эти три дива под контент? А если фон должен быть по всей странице и тот и другой и третий, а не колонками?

Добавлено Чтв 20 Июл 2006 17:31:06 :
Вообше-то, вложенный div 100% работает в IE просто потому, что IE не позволяет фиксировать высоту блока без задания overflow. В Gecko можно сделать через нестандартную компоновку свойством display. Кстати, этот метод используется в шкурках. На стандартах это сделать можно, но в CSS3, который в Firefox в этих пределах реализован в виде нестандартных свойств, а в Opera 9 - никак. Да и в любом случае, мы не могли бы выкинуть Оперу 8.5 и 7, даже если бы в 9.0 работало. В Konqueror тоже не сделать.

С удовольствием прочел статью. Она написана интересным литературным языком, содержит весомые доводы, видна горячая убежденность автора. Интересная статья, особенно некоторые моменты.
Что до описываемых техник, я воспринимаю их скорее как научную фантастику. Это сложная CSS-верстка с кучей хаков, и она не работает. Это один из многих случаев, когда идеализм на деле оказывается всего лишь красивой картинкой. Обратите внимание, как в некоторых других статьях мы встречаем техники, работающие в IE начиная с 5.5 или работающие только в IE (притом что мы не можем пожертвовать пользователями 5.0, как и пользователями современных браузеров, соответственно), так в приведенных примерах возникают проблемы либо в Firefox 1.0, либо в Opera 7.0, и почти ничего из описанного не работает в Netscape 7.0-7.2 или даже 8.0, не говоря уже о 6.x. Отсюда следует два вывода. Первый - приведенные описания - хороший образчик прозы, демонстрация мощи CSS, но не реальные рецепты. Второй - если в основанном на Gecko браузере рецепт не работает, в то время как в Firefox он работает, это значит, что неизбежны проблемы в других браузерах на основе Gecko, да и в Файрфоксе, скорее всего, добавление небольшого количества элементов сломает верстку.
Это мне напоминает эффектные способы центрирования floatов, часть из которых подразумевали нелогичную верстку, или использование JavaScript, часть не работали в IE 5.0. Я потом разработал свой способ центрирования блоков с высотой и фонами, но он довольно сложен, и я до сих пор не знаю, какие у него недостатки - вроде бы и для блоков одинаковой ширины, и для растягивающихся, работает во всем, в чем я тестировал.

Добавлено Чтв 20 Июл 2006 18:08:24 :
P.S. До divов одинаковой высоты через задание избточной высоты и очистку в родительском элементе я тоже додумывался, и мне как раз не понравилась несовместимость.

Al_H
Вот решение, которое одинаково работает в IE6, FF, Opera 8 и 9. В другом не проверял, но думаю, что глюки пойдут только на древних браузерах, которые в приницпе с CSS не дружат.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title></title>
</head>
<body>

<style type="text/css">
html, body {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

div#bg1 {
	width: 100%;
	position: relative;
	background-color: #00FF7F;
}

div#bg2 {
	position: relative;
	width: 66%;
	margin-left: 34%;
	background-color: #B0C4DE;
}

div#bg3 {
	position: relative;
	width: 50%;
	margin-left: 50%;
	background-color: Aqua;
}

div#cont {
	position: relative;
	width: 300%;
	margin-left: -200%;
}
</style>

<div id="bg1"><div id="bg2"><div id="bg3">

<div id="cont">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
</div>

</div></div></div>

</body>
</html>

ЗЫ
Или я не понял, что требовалось.
Были проблемы с выводом в IE первее заявленых слоёв выше поздних, но это идиотская чувствительность ослика к некоторым моментам синтаксиса.

Отредактировано rowlad (22-07-2006 21:23:33)

Al_H

Перечисли набор браузеров в которых вы обычно проверяете. (в тех, что я назвал всё одинаково)

А это похоже и есть основная проблема и обходится она, спокойно и без сложностей, имхо, пока только табличной вёрсткой.
Вообщем суть теперь понятна окончательно. Будем дальше посмотреть.

Вот пока что получается что так. Но в CSS, в отличие от таблиц, есть элемент фантастики. То, что считалось невозможным, оказывается возможным. Например, центрирование навигационной панели. Или сайт по высоте не меньше окна.

Боюсь, опять не работает. В Firefox 1.5. Можно ссылку на работающую версию (включая фоны)?
Браузеры, в которых обычно тестирую сайт:
Internet Explorer 5.0,5.5,6.0, Mozilla Firefox 1.5.0.4, Mozilla 1.5, Opera 7.01,7.11,7.50,8.50,9.0, под настроение - Konqueror 3.4, под большое настроение - Netscape 8.x.
Обоснование: IE: 5.0 - это Win2000, у 5.5 свои баги, 6.0 - последний релиз, который реально используется, 7.0b пока ставить не рискну, Firefox+Mozilla: со времен 1.5 в движке пара мелочей поменялась, Opera: разные баги во всех этих версиях, в 9.0 добавлены новые и исправлена часть старых. Скоро надо будет добавлять Fx 2.0b.

Отредактировано Al_H (24-07-2006 14:19:06)

А почему в части браузеров, включая Internet Explorer, в любом случае полосы прокрутки, в том числе горизонтальная?
Но вообще стоит посмотреть, как это можно использовать... Возможно, возникнут трудности с margin-left.

Кроме того, рецепт не работает во всех Операх, кроме девятой.

Отредактировано Al_H (24-07-2006 16:21:22)

В Опере при недостатке контента все равно появляется прокрутка.
Сильно плохеет IE <6.0 - за счет ширины блоков.
Но идея понятна, спасибо.

Lain_13

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