<
  • Главная
Статьи

Крос-браузерні CSS-рішення створення колонок з рівною висотою

  1. проблема
  2. Рішення

Геніальне і просте рішення запропонував Matthew James Taylor в своїй статті . Дане рішення засноване на чистому CSS без хаков, без застосування картинок і Java-Script. У своїй статті Метью спочатку описує саму проблему створення колонок з рівною висотою, а потім пропонує саме рішення проблеми.

проблема

Геніальне і просте рішення запропонував Matthew James Taylor в   своїй статті

Я не буду описувати повністю всю проблему створення блоків (div) однакової висоти в незалежності від контенту, думаю, що ілюстрація все прекрасно пояснює. Скажу лише що основна проблема в тому, що висота блоку залежить від контенту в ньому. На жаль до div ми не можемо застосувати heigh: 100% ;, або фіксована висота в пікселях, що дуже небажано, або залежність від контенту. Загалом, на цьому обмежимо пояснення суті проблеми і перейдемо до вирішення.

Рішення

Першим кроком у вирішенні проблеми створення колонок з рівною висотою, стане їх поділ на частини. Тобто кожну колонку ми розділимо на окремий блок щоб вирішувати проблему по частинах. Плюс ми таким чином відділимо контент від його оформлення, фон відділимо від самого контетна.

Плаваючий Контенери буде завжди тієї висоти, яку йому надає контент - сумна істина :( Єдиним спосіб вирішити зробити div рівним по висоті будь-якої з існуючих колонок з контентом - це «обернути» в нього дані колонки.

Як бачите, в прикладі вище три блоки укладені в один спільні блок.

<Div id = "container1"> <div id = "col1"> Column 1 </ div> <div id = "col2"> Column 2 </ div> <div id = "col3"> Column 3 </ div> </ div>

<Div id = "container1"> <div id = "col1"> Column 1 </ div> <div id = "col2"> Column 2 </ div> <div id = "col3"> Column 3 </ div> </ div>

А ось CSS для цієї розмітки

# Container1 {float: left; width: 100%; } # Col1 {float: left; width: 30%; background: red; } # Col2 {float: left; width: 40%; background: yellow; } # Col3 {float: left; width: 30%; background: green; }

# Container1 {float: left; width: 100%; } # Col1 {float: left; width: 30%; background: red; } # Col2 {float: left; width: 40%; background: yellow; } # Col3 {float: left; width: 30%; background: green; }

Суть даної розмітки і CSS полягає в тому, що всі блоки, і ті, які з контентом, і той, який їх містить повинні бути плаваючими (мати властивість float, причому не важливо в якому напрямку). Якщо ми не надамо властивість float для всіх контейнерів, то контейнер, що містить в собі блоки з контентом не зможе охопити їх, і в підсумку висота загального конейнера насправді буде дорівнює «0», а не висоті найвищого блоку з контентом. В кінці статті я запропоную рішення цієї проблеми.

Додавання додаткових вкладених контейнерів

Далі нам слід додати ще кілька контейнерів в основний контейнер, який містить в собі блоки з контентом. У підсумку, ми повинні отримати дорівнює кількості блоків з контентом, кількість «обгорток». У нашому випадку на потрібно додати ще два вкладених контейнера. А далі ми повинні прибрати властивість background у блоків з контентом і «передати» його «контейнерів-обгортці».

А далі ми повинні прибрати властивість background у блоків з контентом і «передати» його «контейнерів-обгортці»

А так виглядає розмітка цього прикладу:

<Div id = "container3"> <div id = "container2"> <div id = "container1"> <div id = "col1"> Column 1 </ div> <div id = "col2"> Column 2 </ div> <div id = "col3"> Column 3 </ div> </ div> </ div> </ div>

<Div id = "container3"> <div id = "container2"> <div id = "container1"> <div id = "col1"> Column 1 </ div> <div id = "col2"> Column 2 </ div> <div id = "col3"> Column 3 </ div> </ div> </ div> </ div>

А ось CSS, зверніть увагу, що всі контейнери мають властивість float, а «контейнери-обгортки» мають ширину 100%. При цьому фон мають тільки «обгортки»:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 # container3 {float: left; width: 100%; background: green; } # Container2 {float: left; width: 100%; background: yellow; } # Container1 {float: left; width: 100%; background: red; } # Col1 {float: left; width: 30%; } # Col2 {float: left; width: 40%; } # Col3 {float: left; width: 30%; }

# Container3 {float: left; width: 100%; background: green; } # Container2 {float: left; width: 100%; background: yellow; } # Container1 {float: left; width: 100%; background: red; } # Col1 {float: left; width: 30%; } # Col2 {float: left; width: 40%; } # Col3 {float: left; width: 30%; }

Зрушуємо контейнери з допомогою відносного позиціонування

Використовуючи відносне позиціонування ми пересунемо контейнери на їх нове місце. При правильному позиціонуванні «контейнера-обгортки» стає видно що лежить під ним шар, що і створює ілюзію рівній висота колонок. DIV з # container2 ми зміщуємо на 30% вліво щодо містить його блоку, і оголює зелений фон # container3. А DIV з # container1 ми зрушує на 40% вліво щодо містить його блоку # container2 і оголює жовтий фон останнього для центральної колонки. Відповідно червона секція залишається видимої всього на 30% і формує червоний фон ля третьої колонки.

А ось CSS, в якому описані зазначені вище процедури: А ось CSS, в якому описані зазначені вище процедури:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 # container3 {float: left; width: 100%; background: green; } # Container2 {float: left; width: 100%; background: yellow; position: relative; right: 30%; } # Container1 {float: left; width: 100%; background: red; position: relative; right: 40%; } # Col1 {float: left; width: 30%; } # Col2 {float: left; width: 40%; } # Col3 {float: left; width: 30%; }

# Container3 {float: left; width: 100%; background: green; } # Container2 {float: left; width: 100%; background: yellow; position: relative; right: 30%; } # Container1 {float: left; width: 100%; background: red; position: relative; right: 40%; } # Col1 {float: left; width: 30%; } # Col2 {float: left; width: 40%; } # Col3 {float: left; width: 30%; }

Повертаємо колонки з контентом на свої позиції

Тепер нам потрібно повернути на місце колонки з контентом, які змістилися разом з містить їх контейнером. Для цього ми знову застосовуємо відносне позиціонування.

Для цього ми знову застосовуємо відносне позиціонування

І останнє, що нам потрібно зробити - це «обрізати» все, що виступає за межі видимої області, призначивши overflow: hidden; найпершого «контейнеру-обгортці». У нашому випадку це # container3.

У нашому випадку це # container3

Дивимося CSS наведених вище операцій:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 # container3 {float: left; width: 100%; background: green; overflow: hidden; position: relative; } # Container2 {float: left; width: 100%; background: yellow; position: relative; right: 30%; } # Container1 {float: left; width: 100%; background: red; position: relative; right: 40%; } # Col1 {float: left; width: 30%; position: relative; left: 70%; } # Col2 {float: left; width: 40%; position: relative; left: 70%; } # Col3 {float: left; width: 30%; position: relative; left: 70%; }

# Container3 {float: left; width: 100%; background: green; overflow: hidden; position: relative; } # Container2 {float: left; width: 100%; background: yellow; position: relative; right: 30%; } # Container1 {float: left; width: 100%; background: red; position: relative; right: 40%; } # Col1 {float: left; width: 30%; position: relative; left: 70%; } # Col2 {float: left; width: 40%; position: relative; left: 70%; } # Col3 {float: left; width: 30%; position: relative; left: 70%; }

Здавалося б все, але для повної краси нам не вистачає відступів в колонках з контентом. Зараз ми їх зробимо. Але якщо ми додамо просто відступи за допомогою padding, то наша розмітка втратить кроссбраузерность, за рахунок відомого бага Internet Explorer з підрахунком ширини колонок. Отже, щоб зробити відступи кросбраузерності нам потрібно застосувати наступний трюк.

Для того щоб створити видимість відступів ми просто зробимо наші колонки вже, з урахуванням величини відступів зліва і справа, а потім зрушимо їх на потрібне число за допомогою отностиельно позиціонування. У нашому випадку ми візьмемо величину відступу в 2% і тому колонка шириною 30% буде мати ширину 26%, а колонка шириною 40% буде мати ширину 36%. Але тепер, коли ми будемо повертати колонки на місце за допомогою поіціонірованія, нам потрібно пам'ятати, що вони стали вже і, відповідно, збільшити відсоток зсуву для кажой колонки. в нашому випадку для першої на 2%, а для інших до зміщення попередньої додаємо ще 4%.

в нашому випадку для першої на 2%, а для інших до зміщення попередньої додаємо ще 4%

кінцевий CSS

В результуючому CSS нам ще потрібно додати для кожної колонки з контентом властивість overfloww: hidden ;, для того, щоб в разі, якщо вміст перевищить допустиму ширину, наприклад картинка занадто широка, наша розмітка не розвалилася. Це зроблено для IE, посокльку інші браузери удержут розмітку навіть в такому випадку.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 # container3 {float: left; width: 100%; background: green; overflow: hidden; position: relative; } # Container2 {float: left; width: 100%; background: yellow; position: relative; right: 30%; } # Container1 {float: left; width: 100%; background: red; position: relative; right: 40%; } # Col1 {float: left; width: 26%; position: relative; left: 72%; overflow: hidden; } # Col2 {float: left; width: 36%; position: relative; left: 76%; overflow: hidden; } # Col3 {float: left; width: 26%; position: relative; left: 80%; overflow: hidden; }

# Container3 {float: left; width: 100%; background: green; overflow: hidden; position: relative; } # Container2 {float: left; width: 100%; background: yellow; position: relative; right: 30%; } # Container1 {float: left; width: 100%; background: red; position: relative; right: 40%; } # Col1 {float: left; width: 26%; position: relative; left: 72%; overflow: hidden; } # Col2 {float: left; width: 36%; position: relative; left: 76%; overflow: hidden; } # Col3 {float: left; width: 26%; position: relative; left: 80%; overflow: hidden; }

От і все. Особисто мені дуже сподобався запропонований Метью метод. На демонстрацію його в дії можна поглянути на демо-сторінці автора: 2 колонки , 3 колонки , 4 колонки і 5 колонок .

Від себе додам, що можна уникнути проблеми висоти плаваючий «контейнерів-обгорток», якщо використовувати фікс висоти плаваючих блоків, який нормально сприймається валідатором CSS і працює у всіх браузерах. Для цього «обгортку» можна додати class = "clearfix», а в CSS додати такий код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 / * *** Float containers fix *** * / .clearfix: after {content: "." ; display: block; height: 0; clear: both; visibility: hidden; } .Clearfix {display: inline-block; } / * Hides from IE-mac \ * / * html .clearfix {height: 1%; } .Clearfix {display: block; } / * End hide from IE-mac * /

/ * *** Float containers fix *** * / .clearfix: after {content: "."; display: block; height: 0; clear: both; visibility: hidden; } .Clearfix {display: inline-block;} / * Hides from IE-mac \ * / * html .clearfix {height: 1%;} .clearfix {display: block;} / * End hide from IE-mac * /

Тепер точно все. Щасти вам верстки!
PS
Для тих кому набридла верстка і захотілося екзотики є нерухомість в Чорногорії - вілли, будинки, квартири. У кого на що вистачить?
А якщо ви раптом затіяли соціальний проект, то вам обов'язково знадобитися зовнішня соціальна реклама

У кого на що вистачить?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью