Проблема створення колонок однакової висоти досить відома. Суть її в тому, що при верстці float-блоки колонок мають різні висоти, відповідно до свого вмісту.
В ідеалі ж, потрібно отримати рівні колонки
Існують різні способи домогтися цього ефекту. Всі вони без особливих зусиль знаходяться в гуглі, але в основному методика полягає в імітації колонок ( «псевдоколонкі»). Робиться це за рахунок різних зсувів (margin і padding), додаткові контейнери, які «підставляються» під справжні блоки, фонові картинки і навіть за рахунок border.
Все це звичайно цікаво, але при створенні адаптивного дизайну жоден з цих методів не працює як слід.
Ситуація зовсім була невтішною, коли я став працювати з «полурезіновой» адаптивної сіткою, де змінюється значення float блоків (left і none), а висота блоків повинна змінюватися на auto при float: none.
Пробившись із цим завданням кілька днів, я прийшов до висновку, що легальних і досить простих способів її вирішити всього нічого:
- використовувати таблиці (table)
- використовувати display: table (і його похідні)
- використовувати javascript
Верстку через теги table розглядати немає сенсу. Варіант з display: table цікавий, але тільки до моменту, поки не стикаєшся з «особливістю» браузерів відображати вкладені блоки на зразок PRE на всю ширину браузера, а не table-cell-контейнера. У підсумку цей варіант так само довелося відкинути, оскільки всі ці дрібні «особливості» -багі переважили всі переваги методу.
У підсумку залишився тільки один варіант - використання js-скрипта, який буде автоматично розраховувати і виставляти висоти колонок з урахуванням їх «адаптивності».
Нетерплячі можуть подивитися робочий демо-приклад .
HTML-розмітка
Для демонстрації я буду використовувати ось такий html-код:
<! DOCTYPE HTML> <html> <head> <meta charset = "UTF-8"> <title> Дві колонки </ title> ... тут стилі і js-скрипти ... </ head> <body> < div class = "main"> <div class = "main-wrap"> <div class = "content"> <div class = "content-wrap"> <h2> content </ h2> </ div> </ div > <div class = "sidebar1"> <div class = "sidebar1-wrap"> <h2> sidebar1 </ h2> </ div> </ div> <div class = "clearfix"> </ div> </ div > </ div> </ body> </ html>
Це досить типова схема модульної сітки на дві колонки:
- загальний контейнер main
- два блоки-колонки content і sidebar1
- кожен блок супроводжується своїм wrap-блоком
Строго кажучи модульна сітка може бути будь-який, при цьому не має значення ні її розміри, ні розташування блоків колонок. Це принципова відмінність від інших існуючих js-скриптів, де потрібно дотримати певну вкладеність div-блоків. У моєму варіанті це не має ніякого значення.
Як зробити адаптивність
Існує кілька методик. Найпростіший - це «гумовий» дизайн - коли все колонки задаються у відсотках. Проблема такого дизайну в широких моніторах. При ширині більше 1000-1200px абзаци перетворюються в поодинокі рядки, що погіршує читабельність тексту. Тому зазвичай ширину сайту обмежують до 1000px (960, 980px), що дозволяє без проблем розмістити текст і бічну колонку.
При фіксованій ширині сайту адаптивність здійснюється шляхом окремих @ media-правил під кожен діапазон дозволів. Досить поширений наступний варіант:
@media (min-width: 1200px) {} @media (min-width: 768px) and (max-width: 959px) {} @media (max-width: 767px) {}
Тобто сайт верстається з якимось базовим дозволом, наприклад 960px. Якщо дозвіл екрана більше 1200px, то прописуються стилі, де ширина контенту і сайдбара стає більше. Іноді додають ще одну колонку або якісь блоки.
Якщо ж дозвіл нижче базового, то розміри колонок зменшують. Як тільки екран стає дуже тонким, щоб колонки відображалися в читабельному вигляді, їх розміщують вже одна під інший. Зазвичай для цього достатньо вказати
width: 100%; float: none;
Тобто розтягуємо на всю ширину і прибираємо «плавання».
«Полурезіновий» дизайн
Варіант з безліччю @media хороший, але кілька трудовитрат. Якщо подумати, то колонки спочатку повинні бути гумовими до якоїсь певної базової ширини. Якщо розмір екрану більш 960px, то ширина сайту не змінюється і становить 960px. Але як тільки розмір зменшився, то розміри колонок змінюються пропорційно один одному. Як тільки досягається мінімум (дуже тонка колонка), прибираємо «плавання» і розтягуємо блоки на всю ширину.
На демо-прикладі використовується саме такий варіант верстки. Покажу як це робиться.
Спочатку задається загальна ширина контейнера:
div.main {margin: 0 auto; width: 100%; max-width: 960px; }
Перше правило центрує блок в браузері. Друге - виставляє ширину 100%. Третє обмежує розміри максимальною шириною. Таким чином розмір блоку не перевищить 960px.
Внутрішні блоки позиціонуються так:
div.content {width: 75%; float: right; } Div.sidebar1 {width: 25%; float: left; }
Сумарна ширина блоків повинна бути дорівнює 100%. Вирівнювання float також довільно. У цьому прикладі контент розташовується праворуч. Щоб перемістити його вліво (тобто поміняти колонки) досить у div.content вказати float: left ;.
Тепер поставимо @media правило для вузьких екранів (менш 767px):
@media (max-width: 767px) {div.content {width: 100%; float: none; } Div.sidebar1 {width: 100%; float: none; }}
Відразу покажу як розрахувати точні розміри колонок з px в%. Код на less, хто ним не користується можуть скористатися звичайним калькулятором.
// вся корисна ширина сайту (контент + сайдбар) @CONTENT_WIDTH: 960px; // ширина основного сайдбара @SIDEBAR_WIDTH: 250px; // розрахунок пропорцій% для контенту і сайдбара (в сумі 100%) @RATIO_CONTENT: 100% - (100% * @SIDEBAR_WIDTH / @CONTENT_WIDTH); @RATIO_SIDEBAR: 100% - @RATIO_CONTENT;
У css-less використовуємо так:
div.main {... max-width: @CONTENT_WIDTH; ...} div.content {... width: @RATIO_CONTENT; ...} div.sidebar1 {... width: @RATIO_SIDEBAR; ...}
Тобто можна вказати довільні розміри (@CONTENT_WIDTH і @SIDEBAR_WIDTH), LESS сам перерахує їх у відсотки.
Рівна висота колонок
Алгоритм розрахунок висот досить простий: виглядають два блоки, після цього вибирається той, який більше і другого блоку виставляється його висота. У моєму варіанті перед цим виставляється height: auto, з тим, щоб браузер виставив «правильну» висоту вихідних блоків. Якщо цього не зробити, то висота блоків буде тільки збільшуватися, але не зменшуватися.
Для того, щоб відстежувати «адаптивність», я придумав використовувати властивість float блоків. Якщо воно дорівнює none, то ширина блоків повинна бути auto і міняти висоту вже не потрібно.
Ось повний код скрипта:
function column2height (e1, e2) {e1.css ( 'height', 'auto'); e2.css ( 'height', 'auto'); if (e1.css ( 'float')! = 'none') {height_1 = e1.height (); height_2 = e2.height (); if (height_1> height_2) {e2.height (height_1); } Else {e1.height (height_2); }}} $ (Function () {e1 = $ ( 'div.sidebar1'); e2 = $ ( 'div.content'); column2height (e1, e2); $ (window) .resize (function () {column2height (e1, e2);});});
Тобто все шаманство в функції column2height (), яка перший раз спрацьовує при завантаженні документа, а другий - при изменени розмірів браузера.
Блоки, які потрібно порівнювати, вказуються один раз (щоб після їх не шукати). Якщо потрібно вирівняти три колонки, то можна переписати column2height () під потрібну кількість елементів. Там в общем-то тільки порівняння висот на пошук максимальної.
переваги методу
- Працює з будь-html-структурою, де використовуються float-блоки.
- Не вимагає переверстку.
- Будь-яка ширина колонок.
- Простий для розуміння і модифікації.
- «Полурезіновая» -адаптівность не вимагає безлічі @ media-правил.
- Автоматично розпізнається «адаптивність» для розрахунком висоти колонок.
- Використовується справжня висота колонок, а не «псевдоколонкі».
- Блоки колонок можуть бути довільно оформлені, включаючи відступи, поля, межі, фонові зображення, слошние фони і т.п.
До мінусів можна віднести тільки вимога наявності включеного javascript у відвідувача. За сучасними мірками це вже не критично.
