Кросс-браузерный резиновый трёхколоночный макет в высоту окна
Кросс-браузерное решение для резинового макета с одинаковой высотой колонок и стопроцентной высотой
Недавно понадобилось сверстать резиновый трёхколоночный макет с высотой 100% и колонками одинаковой высоты. К моему удивлению, это оказалось не очень простым делом: вместо планируемого получаса это заняло намного больше времени. Требования к макету: кросс-браузерность (куда без неё); минимальная высота: 100% (полное окно, независимо от высоты контента); минимум кода; все три колонки должны быть одинаковой высоты; [...]
← Вернуться к полной версии записи «Кросс-браузерный резиновый трёхколоночный макет в высоту окна»…
Автор: Vladimir; опубликовано в: CSS, HTML; метки: CSS, XHTML, кросс-браузерное решение, макет, резиновый макет, трёхколоночный макет29
Июн
2008
Июн
2008
Комментарии к статье «Кросс-браузерный резиновый трёхколоночный макет в высоту окна» (36) »
Пожалуйста, не используйте эту форму для комментирования! Данная форма предназначена исключительно для ботов.
Оставить комментарий к записи «Кросс-браузерный резиновый трёхколоночный макет в высоту окна»
गते गते पारगते पारसंगते बोधि स्वाहा
Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.
БОЛЬШОЕ СПАСИБО!Хорошие комментарии и хороший макет.
Макет действительно работает. Но, вот, решил я найти универсальный макет (для одной простенькой цмски), в котором можно было бы убрать, к примеру одну из боковых колонок и средняя растянулась бы на её место.
))
В данном шаблоне сделать такой фокус простым убиранием div’а с боковой колонкой не прокатил…
Как быть? Нужно ещё и в стилях что-то править? Но, они довольно тонко заточены всякими отступами да выступами… Даже страшно трогать
А ещё эти боковые полосы – они действительно нужны?
За шаблон действительно автору отдельное СПАСИБО.
Но, есть в нем одна проблема.
Если где-то в контенте установить якорь (ссылку вида
<a>…), и перейти по этому якорюwww.mysite/index.html#1, то весь контент, что над якорем заползает под header (короче исчезает).Виноваты в этом стили, с помощью которых как раз и получаются колонки во всю высоту:
margin-bottom: -997em !important; /* компенсация высоты футера */
Вопрос к автору, каким еще способом в данном шаблоне лучше растянуть колонки на всю высоту?
Что касается дела “Исчезающей колонки в IE6″ (или уползающей колонки), методом экспериментов было выяснено, что это все связано с использованием псевдоклассов hover и active с тегом a и стилем background (хоть и не сложная смесь, но осел ее осилить не смог). Если hover и active и стиль background применять к li, то IE6 их просто игнорирует и левая колонка не убегает.
Я в своё время искал решение, но не нашел — всё, что у меня получалось, это заставить код работать в одном IE, после чего всё напрочь ломалось в другом.
slavapth
Я тоже столкнулся с похожей проблемой – в FF. В др. браузерах (IE и Opera) такого не встречал. Долго рыскал в инете в поисках ответа. И решил воспользоваться методом “тыка”. Ошибка в…
Если убрать в стиле #container – overflow: hidden
Но тогда появляется другая ошибка…ищу ответ дальше…
Спасибо за решение. Сам больше года пользовался другимм – много плюсов, но были и минусы.
Вопрос, сосбственно, такой: можно ли как-то сделать так, чтобы футер не наезжал на бэкграунд колонок? У меня в футере прозрачный png, поэтому получается оч коряво.
Ух как! Поигрался 5 минут, скрестил свое решение и ваше и получилось вообще чудесно. Кода раза в три меньше и удобнее
Работает в последних лисе, опере и хроме, а также в ие 8, 7 и 6.
Если есть желание выложить тут, могу скинуть на почту автору.
Кирилл, если не трудно, вышлите, пожалуйста, на
vladimir at extrememember dot com, я его опубликую. Ну и ссылку на Ваш сайтОтправил
здравствуйте
очень интересно узнать, что же за решение пришло от Кирилла…
==============================
никак не могу найти способ, как сделать “резиновой” по высоте среднюю строку таблицы в 3 строки при фиксированной высоте верхней и нижней…
спасибо большое автору этого блога, что готов делиться своими вариантами реализации не самых простых целей!
=====================================================
если кому-то нужно решение описанного мной выше вопроса,
я его нашла здесь:
http://krylov.org.ua/?p=682
для меня, как для начинающего “вебера”,- самое простое решение без лишних телодвижений ))
А мне вот нужно сделать полупрозрачные колонки (с непрозрачным текстом) одинаковой высоты, и подвал, приклеенный к самому низу. В FF работает вот это:
#left:before, #right:before, #content:before {content: 'EasyClearing';
display: block;
background: inherit;
background-image:url("040_FFFFFF.png");
padding-top: 1000em !important;
margin-bottom: -1000em !important;
height: 0;
}
040_FFFFFF.png – это белый полупрозрачный пиксель. В бэкграунд самого div’а ставить его бесполезно – будет двойное наложение из-за inherit. А если inherit убрать, то будет неполное заполнение колонок.
Проблема в том, что не работает в IE. Вообще. Колонки прозрачные, пикселя нет, как-то по-другому он отрабатывает этот вот :before.