bam

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

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

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

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

Да запросто. Элемент <table> представляет таблицу. Считается, что это нарушает семантику (т.е. смысл) разметки, поскольку мы в этом случае используем таблицы для представления того, что таблицей, по своей сути, не является. Это единственное, почему "таблицы - это плохо". Ну, не считая нагромождения тегов, конечно. Однако элемент <table> до сих пор часто используют - ради свойств, которыми он обладает. display: table - не задаёт таблицу, и элемент, к которому мы его примените, таблицей не станет - ни прямо, ни косвенно. Однако он получит те самые свойства, ради которых обычно применяют таблицы. Таким образом, мы убиваем двух зайцев: оставляем разметку чистой и заставляем элемент вести себя так, как нам удобно. Это вообще никоим образом не табличная вёрстка - просто потому, что таблиц мы не используем. Спасибо! Про семантику знаю и понимаю. Но технически (правда, я не лазил в интерпретаторы и движки браузеров - не могу ничего утверждать), кмк, браузер получив инструкцию "дисплэй: тэйбл" будет обрабатывать блок именно механизмами обработки таблиц, получится, что это та же таблица... И возникает вопрос: наталкивался, пока искал свой случай в сети, на разные макеты и реализации с замудренными ухищрениями и изворотами при том, что если задать блоку свойство "дисплэй: тэйбл" (саму таблицу отметаем из-за нарушения семантики) - всё решится элементарно, однако нигде не видел этого решения, неужели никто про это свойство не знает?!)

Итак: Плохо: Внизу (когда колонки меньше высоты окна) - пустое место. Хорошо: 1)Когда колонки меньше высоты - фон растянут на высоту окна. 2)Когда колонки выше окна - появляется прокрутка. 3)Когда прокручено до низу, фон меньших колонок растянут до низа самой длинной. П.С. прошу прощения за большие картинки

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

Ситуация: 3 колонки: 1-фикс(пикселы), 3-резина в %, 2-всё, что осталось. Если содержимое колонок меньше высоты окна браузера, то фон колонок должен растягиваться до низу (на всю высоту окна браузера). И естественно при изменении высоты окна также растягивается или уменьшается. Если содержимое хотя бы одной колонки больше высоты окна, то все три колонки растягиваются(выравниваются) по высоте самой длинной (с появлением прокрутки). Задача: обойтись без JS, фона с использованием картинок (т.н. faux columns) и трюка с оочень большим padding-bottom и отрицательным margin-bottom. Помимо любого решения в данных условиях отдельно интересует возможность сделать это при помощи свойств высоты в 100%. Конечно, без таблиц и display: table - всё на div. Что на данный момент есть: макет в 3 колонки по ширине удовлетворяет требованиям, по высоте - выравнивается по высоте самой длинной колонки, т.е. если содержимое (хотя бы одной колонки) больше окна браузера, то все три растянуты на эту высоту, висит полоса прокрутки и всё ОК. Если высота браузера больше содержимого всех трёх колонок, то их высоты выровнены по самой длинной, а до нижней границы окна - пустое место без фона колонок. При этом всё работает вообще без использования свойства height. Как реализовано: 5 последовательно вложенных дивов: 4 для фонов трёх колонок + 1 див(самый глубокий) - контейнер для текста трёх колонок. Если нужен код разметки - пишите, выложу. (Но решение годится любое, главное в условиях, описанных выше)