Pull to refresh

Колоночная верстка

Reading time5 min
Views16K
Существует много способов по верстке колоночных макетов. Уже не один нос разбит в течении холиваров, разожженных по поводу использования тех или иных методов. Казалось бы, что все должно быть предельно ясно и понятно, но все-равно возникает много трудностей. Я хочу и свою лепту вложить во всеобщее благое дело, и потому потратил относительно немного времени на эксперименты, которые привели меня к созданию еще одного метода, в котором есть следующие плюсы и минусы:

Плюсы
  • Есть прижимающийся к полу футер
  • Колонки меню растягиваются по 100% высоте
  • Колонок может быть сколько душе угодно
  • Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
  • Ширина как резиновая, так и фиксированная
  • Критический минимум хаков
  • Не используется Javascript
  • Не используются бекграундовые изображения для создания эффекта колонки
  • Никаких таблиц
  • Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

Минусы
  • Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
  • Есть несколько абсолютно-позиционируемых блоков

Сразу хочу сказать, что любая конструктивная критика приветствуется. Если вы где-то когда-то видели что-то похожее — давайте пруф. Я еще с детства любил велосипеды изобретать). Также приветствуются советы по улучшению примера. Доведем вместе до высокого уровня. Будет время — сделаю что-то на подобие генератора верстки, как у ребят из csstemplater.com, чьим инструментом я время от времени пользуюсь и всем всячески рекомендую. Если вам статья показалась многословной — прокрутите вниз — там я выложил несколько ссылок на сделанные по данной методике примеры. Итак, приступим к делу…

Этап 1: Прилипающий к низу окна футер


В нашей работе прилипающий футер — это одна из наиболее распространенных тем. Что же для него надо?
  • 100% высота html и body
  • Минимум 3 блока — один на контейнер, содержащий все элементы, второй — непосредственно сам футер
  • Ну и третий, нужный для расположения в нем контента страницы

Разметка в таком случае будет похожей на:
  1. <div class="wrapper">
  2.   <div class="container">
  3.     Контент
  4.   </div>
  5. </div>
  6.  
  7. <div class="footer">
  8.   Прижимающийся футер
  9. </div>
* This source code was highlighted with Source Code Highlighter.

И, соответственно, CSS для нее:
  1. html, body {
  2.         min-height: 100% !important;
  3.         min-height: auto;
  4.         height: 100%;
  5.         border: none;
  6.       }
  7.       
  8.       body {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       
  13.       .wrapper {
  14.         display: block;
  15.         position: relative;
  16.         min-height: 100%;
  17.         height: auto !important;
  18.         height: 100%;
  19.         width: 100%;
  20.         min-width: 800px;
  21.         background: yellow;
  22.       }
  23. .container {
  24.         display: block;
  25.         height: 1%;
  26.         padding: 0 0 50px 0;
  27.       }
  28. .footer {
  29.         margin: -50px 0 0 0;
  30.         height: 50px;
  31.         background: #BFF08E;
  32.         position: relative;
  33.       }
* This source code was highlighted with Source Code Highlighter.

Глубоко копать не буду, так как думаю, что тут все предельно ясно. Можно обратить внимание на нижний padding у блока .container и минусовый верхний margin у блока .footer. Минусовым сдвигом мы подмимаем футер так, чтобы он помещался над контейнером. Паддинг у контентного блока влияет на то, чтобы контент не залазил под футер, а отодвигал его.
Также мы растягиваем тело документа, чтобы оно было со 100% высотой. Некоторые свойства — такие как бекграунд указал опционально.

Этап 2: Раздумия над следующими шагами


После этого этапа я обычно в блоке .wrapper создаю шапку страницы.
  1. .header {
  2.   position: relative;
  3.   width: 100%;
  4.   height: 50px;
  5.   background: cyan;
  6. }
* This source code was highlighted with Source Code Highlighter.

И тут подходит время сделать колонки одинаковой высоты. Мною вариантов было перепробовано очень много. Перебрав все мыслимые и немыслимые варианты я пришел к выводу, что чтобы колонки растягивались и занимали 100% от документа — логично использовать вариант, когда в создании колонки учавствуют 2 блока. Первый блок — спозиционирован абсолютно, имеет фиксированную ширину и высоту в 100%, а второй блок — позиционирован относительно и накладывается поверх абсолютно спозиционированного блока.
Значит надо добавить абсолютный бокс — в .wrapper и относительно спозиционированный в наш контейнер
Приведу пример из моей верстки:
  1. <div class="wrapper">
  2.   <div class="column-l">
  3.   </div>
  4.   <div class="column-r">
  5.   </div>
  6.   <div class="column-m">
  7.   </div>
  8.   <div class="header">
  9.     Шапка
  10.   </div>
  11.   <div class="container">
  12.     <div class="column-l">
  13.       Первая колонка
  14.     </div>
  15.     <div class="column-r">
  16.       Вторая колонка
  17.     </div>
  18.     <div class="content">
  19.       Контент
  20.     </div>
  21.     <div class="clear">
  22.     </div>
  23.   </div>
  24. </div>
  25. <div class="footer">
  26.   Прижимающийся футер
  27. </div>
* This source code was highlighted with Source Code Highlighter.

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

Заключение: Примеры в студию!


Привожу также несолько примеров макетов, собранных по данной системе:
В общем, комбинаций может быть столько, сколько вам угодно. Напомню или скажу тем кто не знает, что z-index срабатывает как для блоков, позиционируемых абсолютно, так и для position:relative;

Все указанные примеры вы можете скачать одним архивом (11 кб)

Надеюсь, я помог кому-то). Извините за некоторую сумбурность.
Спасибо за внимание.
Tags:
Hubs:
Total votes 106: ↑97 and ↓9+88
Comments134

Articles