Упёрся в проблему при вёрстке. Понимаю, что туплю, но видимо случай выдался клинический.
Итак, смысл задачи:
только XHTML1.0 Strict и CSS,
только DIV-ы без применения таблиц,
требуется осуществить привязку подвала к низу экрана браузера в случае не полного заполнения по вертикали экрана контентом, но при переполнении есс-но подвал должен быть после контента.
Есс-но требуется совместимость с Gecko, IE и Opera. Как сделать такое средствами HTML с применением таблиц понятно. На свойства же CSS для контейнеров разные браузеры реагируют по разному (в особенности IE). Чую, что решение есть, но не вижу. Делать хак под разные браузеры не хочется, ибо не тот случай.
Вообщем хэлп.!

Я знаю три разных способа. Но в некоторых случаях не все они применимы.

А ещё есть такое заклинание

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 (?).

Lynn
Заклинание 100% высоты увы, но не совсем нормально работает. Всего уже не вспомню, но перепробовал кучу комбинаций  со свойством height для высоты контейнеров. Разнае браузеры по разному себя ведут. IE, к примеру, упорно не хочеи прилеплять низ блока к нижней части экрана.

Добавлено Чтв 20 Июл 2006 16:43:55 :
Al_H
Спасибо, большое человеческое спасибо. Заодно есть теперь над чем в плане теории поразмыслить.

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

Al_H
три фона в равных долях столбцами или тремя горизонтами?

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

Al_H
Идея понятна, приступаю к следственному экспериментировани. Я правда бы вообще сделал три div-а с float по левому краю и шириной в 33, 33 и 34 процента. Пока не уверен, что получится с вертикальной растяжкой для разных браузеров по одинаковому.

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

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

Al_H
А это разве не оно?
http://www.positioniseverything.net/articles/onetruelayout/

С удовольствием прочел статью. Она написана интересным литературным языком, содержит весомые доводы, видна горячая убежденность автора. Интересная статья, особенно некоторые моменты.
Что до описываемых техник, я воспринимаю их скорее как научную фантастику. Это сложная 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ов одинаковой высоты через задание избточной высоты и очистку в родительском элементе я тоже додумывался, и мне как раз не понравилась несовместимость.

P.P.S. На самом деле, подходит только div верхнего уровня, содержащий весь контент. Все вложенные divы не будут становиться 100% от высоты документа, потому что height и min-height не задают высоту в процентах от высоты документа, они привязаны к окну. Точно по той же причине нельзя разместить рядом несколько divов 100%ной высоты - они будут разной высоты, если тот, который содержит весь контент, растянется больше высоты окна.

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 первее заявленых слоёв выше поздних, но это идиотская чувствительность ослика к некоторым моментам синтаксиса.

Во-первых, в разных браузерах отображается по-разному. Во-вторых, три вложенных divа по высоте контента можно сделать - это понятно.
А нужно:
1. Высота страницы - по высоте экрана, либо, если контента больше, то контента
2. По всей высоте страницы идет фон
3. Фонов три, и все сверху донизу, и это именно фоновое изображение
Вот пункт 3 и сложно реализовать.
Если писать по-человечески, это будет

HTML,BODY {height: 100%;}
DIV.pagemain1,DIV.pagemain2,DIV.pagemain3 {min-height: 100%; background-image: url(bg1.gif); background-position: left top; background-repeat: repeat-x;}
* html DIV.pagemain1,* html DIV.pagemain2,* html DIV.pagemain3 {height: 100%;}
DIV.pagemain2 {background-position: right top;}
DIV.pagemain3 {background-image: url(bg3.gif); background-position: center top;}

Но это не срабатывает из-за понимания 100% высоты.

Al_H

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

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

Al_H
Перепробовал целую кучу комбинаций, но, имхо, единственный вариант, это две таблицы стилей и скрипт на джаве для определения ПА. Иначе похоже глухо, т.к. реакция на min-height и height даже в старших элементах html и body у ослика предельно отличается от остальных.

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

Al_H

Это-то понятно, но вот решение упорно прячется. Уже вариантов с десяток перепробовал разных, только видно не время ещё для наступления чуда. Не выходит каменный цветок...

Добавлено Пнд 24 Июл 2006 12:38:13 :
Вроде как заработало одинаково в IE6, Opera 8 и 9, FF. Других браузеров в наличии сейчас не имею. Вообщем смотри, проверяй, задумка вполне простая, а именно - подкладка доп.фона в нижнем слое.

<!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">
div#bg_1 {
	background-image: url(img1.png);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

div#bg_2 {
	background-image: url(img2.png);
	height: 100%;
	margin-left: 34%;
	position: absolute;
	top: 0;
	width: 66%;
	z-index: 0;
}

div#bg_3 {
	background-image: url(img3.png);
	height: 100%;
	margin-left: 50%;
	position: absolute;
	top: 0;
	width: 50%;
	z-index: 0;
}

div#bg1 {
	background-image: url(img1.png);
	position: relative;
	width: 100%;
}

div#bg2 {
	background-image: url(img2.png);
	margin-left: 34%;
	position: relative;
	width: 66%;
}

div#bg3 {
	background-image: url(img3.png);
	margin-left: 50%;
	position: relative;
	width: 50%;
}

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

html, body {
	height: 100%;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	width: 100%;
}

</style>


<div id="bg_1"><div id="bg_2"><div id="bg_3"></div></div></div>

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

test test test test test test test test test test test test  

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


</body>
</html>

Боюсь, опять не работает. В 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
Вот ссылка, пробуй - http://friendshipforce.ru/tmp/bg/index.html (неполное заполнение страницы) и http://friendshipforce.ru/tmp/bg/index2.html (полное заполнение с переполнением)
У меня всё работает в тех браузерах, что я перечислил.

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

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

Al_H
если честно, то насчёт полос прокрутки горизонтальных, у меня оно не возникает, но возможно, что есть какой-то трабл при точном пересчёте процентовки в ширине. Можно просто немного поиграть с процентами в width и margin-left (плюс-минут 1%).
В остальном решение реально рабочее.

Добавлено Пнд 24 Июл 2006 16:36:25 :
Всё, проблема устранена. В свойствах div#bg_2 и div#bg2 для margin-left вместо 34% поставил 33%

Добавлено Пнд 24 Июл 2006 16:41:05 :
С Opera тоже проблема решена. Просто не доглядел, забыл для блока контента Z-index проставить.
Вообщем вот полный код:

<!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">
div#bg_1 {
	background-image: url(img1.png);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

div#bg_2 {
	background-image: url(img2.png);
	height: 100%;
	margin-left: 33%;
	position: absolute;
	top: 0;
	width: 66%;
	z-index: 0;
}

div#bg_3 {
	background-image: url(img3.png);
	height: 100%;
	margin-left: 50%;
	position: absolute;
	top: 0;
	width: 50%;
	z-index: 0;
}

div#bg1 {
	background-image: url(img1.png);
	position: relative;
	width: 100%;
}

div#bg2 {
	background-image: url(img2.png);
	margin-left: 33%;
	position: relative;
	width: 66%;
}

div#bg3 {
	background-image: url(img3.png);
	margin-left: 50%;
	position: relative;
	width: 50%;
}

div#cont {
	margin-left: -200%;
	position: relative;
	width: 300%;
	z-index: 1;
}

html, body {
	height: 100%;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	width: 100%;
}

</style>


<div id="bg_1"><div id="bg_2"><div id="bg_3"></div></div></div>

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

test test test test test test test test test test test test  

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


</body>
</html>

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

Справа в ФФ2.0б1 появилась полоска в 1% шириной с тем же фоном, что и в первой... видимо зря вы меняли 34% на 33%... Ж)
...убить билла...

Lain_13

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

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

Al_H
Расскажи о результатах, интересно всё-таки, получилось приблизиться к разгадке головоломки или нет?

Я проблему трех фонов решал вообще экзотическим способом. Два фона распределял между body и divом верхнего уровня, а еще один, который должен был прижиматься к низу страницы, добавлял отдельным слоем и z-indexом помещал его под контент. Способ идиотский, но работает в 10 браузерах, в которых я тестировал.

Тоже вариант. В любом случае неплохая разминка для мозгов получилась.

А представьте, когда не разминка для мозгов, а на работе верстка, и сдавать вечером.

Хыы, пытался однажды использовать Equal Height Columns, но столкнулся со множеством проблем. Последним гвоздем стали якоря в Firefox 1.5. Кстати я писал об этой проблеме автору, но соответствующий аппендикс появился лишь около месяца спустя...

Denton
Да, и я об этом. Такие хитрости нечасто срабатывают. Впрочем, например, в технике верстки с контентом, идущим в коде до обеих колонок, вроде в браузерах проблем нету - хитрости разные бывают. Но, думаю, если решение и найдется, то через колонки избыточной высоты и их отсекание охватывающим блоком.

Мне пришлось делать через JS. Юзаю некий скрипт от Project Seven, а абсолютное позиционирование элементов напрочь убило подвал. Видимо придется возвращаться к старым добрым и самое главное проверенным Faux Columns.

Нуууу через JavaScript - неспортивно. Вообще большинство задач решаются через HTML+CSS, например, раньше я меню центрировал скриптом, теперь знаю как сделать это на CSS. Когда же наконец браузеры будут поддерживать CSS3?

Сам понимаю, что неспортивно. На счет центрирования — http://www.umade.ru/resources/css/deadc … entre.html, это? А об CSS3 вообще можно забыть лет эдак ещё на 5 или 6 — до тех пор пока осел своим черепашьим шагом не освоит его. И даже тогда предыдущие его версии будут продолжать пить кровь веб-дизайнерам...

Да, это точно.
Насчет ссылки - это работает только на страницах с известной высотой. Но мы, естественно, этот метод находили.