HTML and CSS

HTML and CSS

{Лаборатория экстремальной web-верстки...}

Абсолютное позиционирование и колонки равной высоты

Абсолютное позиционирование и колонки равной высоты

В любой сфере деятельности, а будем говорить применительно к web-верстке, встречаются побочные эффекты. Собственно, в этом нет ничего необычного. Все в основном сводится к правке косяков и кривостей в тех или иных браузерах.

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

Очень часто верстальщики, как начинающие, так и профессионалы для создания иллюзии одинаковой высоты колонок центральной части макета используют стилевые правила:

margin-bottom:-32767px;padding-bottom:32767px;

Побочные эффекты разметки на их основе давно известны:

  • Не удачное сочетание стилей может привести к появлению бесконечной вертикальной прокрутке web-страницы
  • Отсутствие нижнего border’a у колонок
  • Не корректная работа меток-якорей

Если два первых пункта при грамотной реализации и не больших издержках в виде лишних контейнеров для прорисовки нижнего border’a не являются непреодолимыми, то проблема работы меток-якорей решения на сегодняшний день не имеет.

Предлагаемая вам разметка практически полностью лишена перечисленных недостатков, за исключением дополнительных блоков.

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

Пример


RSS лента ВСЕГО блога с комментариями RSS лента ВСЕГО блога БЕЗ комментариев RSS лента этой КАТЕГОРИИ с комментариями RSS лента этой КАТЕГОРИИ и БЕЗ комментариев RSS лента ЭТОГО ПОСТА с комментариями к нему



Прыг: 04 05 06 07 08 09 10 11 12 13 14
Скок: 10 20 30 40 50 60 70 80 90
English German French Spanish Italian Japanese
  • Programming V. Lasto
  • Designer S. Gordi
  • Created in 0,01908 seconds
  • © 2007-2010