Вёрстка div высота 100% 3 колонки

[bam]

Ситуация:

3 колонки: 1-фикс(пикселы), 3-резина в %, 2-всё, что осталось.

Если содержимое колонок меньше высоты окна браузера, то фон колонок должен растягиваться до низу (на всю высоту окна браузера). И естественно при изменении высоты окна также растягивается или уменьшается.

Если содержимое хотя бы одной колонки больше высоты окна, то все три колонки растягиваются(выравниваются) по высоте самой длинной (с появлением прокрутки).

Задача:

обойтись без JS, фона с использованием картинок (т.н. faux columns) и трюка с оочень большим padding-bottom и отрицательным margin-bottom. Помимо любого решения в данных условиях отдельно интересует возможность сделать это при помощи свойств высоты в 100%.

Конечно, без таблиц и display: table - всё на div.

Что на данный момент есть:

макет в 3 колонки по ширине удовлетворяет требованиям, по высоте - выравнивается по высоте самой длинной колонки, т.е. если содержимое (хотя бы одной колонки) больше окна браузера, то все три растянуты на эту высоту, висит полоса прокрутки и всё ОК. Если высота браузера больше содержимого всех трёх колонок, то их высоты выровнены по самой длинной, а до нижней границы окна - пустое место без фона колонок.

При этом всё работает вообще без использования свойства height.

Как реализовано:

5 последовательно вложенных дивов: 4 для фонов трёх колонок + 1 див(самый глубокий) - контейнер для текста трёх колонок.

Если нужен код разметки - пишите, выложу. (Но решение годится любое, главное в условиях, описанных выше)

[Gaspode]

Конечно, без таблиц и display: table - всё на div.

А вы не понимаете, почему таблицы - плохо, а display: table - нет? Это я так, к слову.

Edited September 2, 2011 by Gaspode

[psywalker]

bam, Ты лучше покажи скриншоты, как нужно чтобы было, и как не нужно. С пояснениями.

[bam]

Раз уж "к слову", то напишите, пожалуйста!

почему таблицы - плохо, а display: table - нет

[Gaspode]

Раз уж "к слову", то напишите, пожалуйста!

Да запросто.

Элемент <table> представляет таблицу. Считается, что это нарушает семантику (т.е. смысл) разметки, поскольку мы в этом случае используем таблицы для представления того, что таблицей, по своей сути, не является. Это единственное, почему "таблицы - это плохо". Ну, не считая нагромождения тегов, конечно.

Однако элемент <table> до сих пор часто используют - ради свойств, которыми он обладает.

display: table - не задаёт таблицу, и элемент, к которому мы его примените, таблицей не станет - ни прямо, ни косвенно. Однако он получит те самые свойства, ради которых обычно применяют таблицы. Таким образом, мы убиваем двух зайцев: оставляем разметку чистой и заставляем элемент вести себя так, как нам удобно. Это вообще никоим образом не табличная вёрстка - просто потому, что таблиц мы не используем.

Edited September 2, 2011 by Gaspode

[bam]

bam, Ты лучше покажи скриншоты, как нужно чтобы было, и как не нужно. С пояснениями.

Итак:

Плохо:

Внизу (когда колонки меньше высоты окна) - пустое место.

Хорошо:

1)Когда колонки меньше высоты - фон растянут на высоту окна.

2)Когда колонки выше окна - появляется прокрутка.

3)Когда прокручено до низу, фон меньших колонок растянут до низа самой длинной.

П.С. прошу прощения за большие картинки

Edited September 2, 2011 by bam

[sigma77]

bam,

Браузеры?

[bam]

Раз уж "к слову", то напишите, пожалуйста!

Да запросто.

Элемент <table> представляет таблицу. Считается, что это нарушает семантику (т.е. смысл) разметки, поскольку мы в этом случае используем таблицы для представления того, что таблицей, по своей сути, не является. Это единственное, почему "таблицы - это плохо". Ну, не считая нагромождения тегов, конечно.

Однако элемент <table> до сих пор часто используют - ради свойств, которыми он обладает.

display: table - не задаёт таблицу, и элемент, к которому мы его примените, таблицей не станет - ни прямо, ни косвенно. Однако он получит те самые свойства, ради которых обычно применяют таблицы. Таким образом, мы убиваем двух зайцев: оставляем разметку чистой и заставляем элемент вести себя так, как нам удобно. Это вообще никоим образом не табличная вёрстка - просто потому, что таблиц мы не используем.

Спасибо! Про семантику знаю и понимаю.

Но технически (правда, я не лазил в интерпретаторы и движки браузеров - не могу ничего утверждать), кмк, браузер получив инструкцию "дисплэй: тэйбл" будет обрабатывать блок именно механизмами обработки таблиц, получится, что это та же таблица...

И возникает вопрос: наталкивался, пока искал свой случай в сети, на разные макеты и реализации с замудренными ухищрениями и изворотами при том, что если задать блоку свойство "дисплэй: тэйбл" (саму таблицу отметаем из-за нарушения семантики) - всё решится элементарно, однако нигде не видел этого решения, неужели никто про это свойство не знает?!)

[sigma77]

неужели никто про это свойство не знает?!)

Знают. Но ИЕ7 и ниже его не поддерживают. Поэтому и не пользуется популярностью.

Так какая поддержка браузерова вам нужна?

[bam]

bam,

Браузеры?

Все возможные (без фанатизма, конечно)

ИЕ 6-9

ФФ 2(3)-6

Опера 9-11.5

Сафари 3.1-5.1

Хром 9-13

Кстати, ещё вопрос по решению с "бесконечным" паддингом и отрицательным маржин: всё работает, кроме ИЕ 6 и 7 - там не работает прокрутка, обрезает по краю окна. В коде для нормальных браузеров используется "минимальная высота";знаю, что в ИЕ6 нету - как исправить? (код на jsFiddle только забыл убрать комментарий в ЦСС для высоты в блоке ХТМЛ, БОДИ)

Edited September 2, 2011 by bam

[zSpx]

Все возможные (без фанатизма, конечно)

ИЕ 6-9

ФФ 2(3)-6

Опера 9-11.5

Сафари 3.1-5.1

Хром 9-13

...простите

Edited September 2, 2011 by zSpx

[Gaspode]

кмк, браузер получив инструкцию "дисплэй: тэйбл" будет обрабатывать блок именно механизмами обработки таблиц, получится, что это та же таблица...

С точки зрения документа - нет. Только это и важно.

В коде для нормальных браузеров используется "минимальная высота";знаю, что в ИЕ6 нету - как исправить?

В ИЕ6 свойство height работает так же, как min-height в остальных браузерах.

Такое случалось видеть:

min-height: 100%;

height: auto!important;

height: 100%;

?

Все браузеры хавают height: auto!important, ИЕ6 считает, что height: 100% здесь "важнее" (упоминается позже в том же наборе правил), поэтому применяет его, а оно работает так же, как должно работать свойство min-height.

Edited September 2, 2011 by Gaspode

[bam]

Такое случалось видеть:

min-height: 100%;

height: auto!important;

height: 100%;

?

Все браузеры хавают height: auto!important, ИЕ6 считает, что height: 100% здесь "важнее" (упоминается позже в том же наборе правил), поэтому применяет его, а оно работает так же, как должно работать свойство min-height.

Эх, случалось и видеть, и писать... Только вот этот код, что с добавлением такой конструкции, что без неё, не работает в ИЕ6 и 7... (в остальных браузерах всё ОК)

[Softlink]

Ну как вариант, можно сделать абсолютную подложку. Однако в 6-7 появляется неактивный и неубираемый скролл. В современных браузерах все работает исправно.

[psywalker]

http://psywalker.ru/Forum/Column/Untitled-3.html

[boomrest]

Раз уж "к слову", то напишите, пожалуйста!

Да запросто.

Элемент <table> представляет таблицу. Считается, что это нарушает семантику (т.е. смысл) разметки, поскольку мы в этом случае используем таблицы для представления того, что таблицей, по своей сути, не является. Это единственное, почему "таблицы - это плохо". Ну, не считая нагромождения тегов, конечно.

Однако элемент <table> до сих пор часто используют - ради свойств, которыми он обладает.

display: table - не задаёт таблицу, и элемент, к которому мы его примените, таблицей не станет - ни прямо, ни косвенно. Однако он получит те самые свойства, ради которых обычно применяют таблицы. Таким образом, мы убиваем двух зайцев: оставляем разметку чистой и заставляем элемент вести себя так, как нам удобно. Это вообще никоим образом не табличная вёрстка - просто потому, что таблиц мы не используем.

Я крайне разочарован в div-ах, xhtml, IE и т.д. Раньше делал макет сайтов в таблицах, оказалось, что это семантически не верно. Решил валидность соблюсти, сделать все по правилам. И столкнулся с извечной проблемой форматирования div.

Проблема в верстке класического макета на div: Шапка -> 3 колонки -> Подвал (Рис 1). Но вот незадача... Не получается сделать универсальный макет, когда колонки пустые, а подвал "прилеплен" книзу страницы, как в таблицах. В табличной верстке при задании высоты любой средней ячейки в 100%, отсчет ведется от контейнера <table> и таблица получается растянута полностью по высоте (Рис 3). В то время, как в <div> отсчет ведется от размера страницы (или от родителя) и при задании height: 100% подвал "уходит" вниз (Рис 2). Можно конечно подсчитать % средней части, но если изменится разрешение экрана, то и этот процент изменится. Например, при разрешении экрана 1024px (по высоте), хэдер=200px, футер=100px, высота средних колонок получается 64%. Но с другим разрешением экрана % изменится и подвал "отлипнет" от низа страницы или появится прокрутка. Можно ли сделать на div как в таблицах. И зачем тогда вся эта хваленая валидность, если нельзя?

Рис 1. Как получается

Рис 2. Как надо, но не получается. div height=100%

Рис 3. А должно быть так (как в таблицах).

Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	height:100%;
}
html {
  margin: 0px;
  padding: 0px;
	height:100%;
}
#wrapper {
 text-align:center;
 width: 100%;
 height: 100%;
}
#header {
 height: 200px;
 width: 100%;
 text-align:center;
 background:#f99;
}
#sidebar1 {
 height:100%;
 width: 20%;
 float:left;
 text-align:center;
 background:#3366CC;
}
#content {
 height:100%;
 width:60%;
 float:left;
 text-align:center;
 background:#999999;
}
#sidebar2 {
 height:100%;
 width: 20%;
 float:left;
 text-align:center;
 background:#66FF66;
}
#footer {
 height: 100px;
 width: 100%;
 text-align:center;
 background-color: #0f0;
 clear: both;
}
</style></head>

<body">
<div id="wrapper">
<div id="header">header</div>
<div id="sidebar1">sidebar1</div>
<div id="content">content</div>
<div id="sidebar2">sidebar2</div>
<div id="footer">footer</div>
</div>
</body>
</html>

Извините, что картинки большие. Спасибо

Edited December 2, 2011 by boomrest

[SelenIT]

Я крайне разочарован в div-ах, xhtml, IE и т.д. Раньше делал макет сайтов в таблицах, оказалось, что это семантически не верно. Решил валидность соблюсти, сделать все по правилам...

Горький факт: специального механизма для раскладки макетов в CSS на сегодняшний день тупо нет. Всё, что есть — хаки разной степени извра неочевидности. Флоаты в том числе... и таблицы в том числе тоже.

Валидность и семантика — вообще вещи слабо связанные, таблицы для каркаса формально валидности не нарушают (а с rel="presentation" — вроде как и вообще не так страшны). "Валидно и семантично" — конечно, идеал, к которому надо стремиться, но без компромиссов на сегодня не получается. Впрочем, семантичная верстка обычно выходит валидной по построению, обратное неверно .

XHTML тем более слабо связан с валидностью, еще слабее — с семантикой и практически никак — с реальностью (увы).

А по вопросу — как вариант, спозиционировать шапку и подвал абсолютно поверх колонок с min-height: 100%, а содержимое колонок отпихнуть на столько же пикселей (благо высота фиксирована) паддингом обертки (либо box-sizing: border-box, а для старых IE — expression)...

[bam]

В моем случае никаких подвалов и шапок не надо было делать, только три колонки (это, конечно, несильно меняет условия, но всё же)

Кстати, я забыл написать, что "история", связанная с этим заданием, давно закончилась...

Задание (и эти "искусственные" ограничения - без JS и т.п.) давали на собеседовании в одной компании, которая искала веб-разработчика.

Ни один из 4 моих знакомых веб-разработчиков и верстальщиков не решил эту задачу в данных ограничениях, и я, соответственно, тоже.

Решения в Интернет я тоже не нашел. Но сделал всеми возможными способами - с JS, паддингами-марджинами, фоновыми картинками и по условиям(без всего), но в последнем случае только в том виде, как было описано в "Что на данный момент есть" в первом посте.

От комментариев "как это на самом деле решается" мои собеседователи после сдачи и проверки задания отказались.

На других собеседованиях при рассказе об этой задаче мне тоже никто(из тех, кто выслушивал и задумывался) не смог показать, как можно решить...

[2001photo]

спасибо за этот макет с футером-хедером. в коде опечатка в <body">. Надо-ли что-то добавлять в данный маке для кроссбраузерности, или это уже кроссбраузерно?

[bam]

спасибо за этот макет с футером-хедером. в коде опечатка в <body">. Надо-ли что-то добавлять в данный маке для кроссбраузерности, или это уже кроссбраузерно?

Лучше просто запусти в разных браузерах или в каком-нибудь веб-сервисе кроссбраузерного тестирования - если в тех браузерах, что тебе нужны, всё норм отобразится, то ничего не добавляй

Edited January 14, 2012 by bam