За родом занять, стикаючись з потребами початківців вебмайстрів зверстати каркас сторінки інтернет магазину строго по примхам замовника, доводиться час від часу нагадувати якісь дрібниці і допомагати в знаходженні легких рішень нетипових завдань.
Одна з таких - використовуючи тільки обожнену замовником DIV-ву верстку і взагалі не залучаючи JavaScript, дати колонкам сайту автоматичне вирівнювання висоти по найбільш заповненою колонці, подібно до того як це відбувалося б в нелюбимої табличній верстці.
Нижче пропоную елементарне рішення на основі всього двох оголошень в стилях сайту і одного обгортковий контейнера в тілі сторінки. Рішення валідності для безлічі браузерів, крім IE6-IE7, і при видаленні одного властивості з стилів, привнесених цим рішенням, може бути перетворено під браузери без підтримки CSS3.
Припустимо, є наступна розмітка: шапка, три колонки (ліва, центральна, права) і підвал сторінки.
<! DOCTYPE HTML> <html> <head> <title> Приклад колонок однакової висоти на CSS </ title> </ head> <body> <div class = "header"> шапка </ div> <div class = "left "> ліва колонка </ div> <div class =" center "> центральна колонка </ div> <div class =" right "> права колонка </ div> <div class =" footer "> підвал </ div> < / body> </ html>
Крок 1 Насамперед обертає майбутні колонки в DIV-контейнер. Наприклад, призначимо йому клас columns.
<! DOCTYPE HTML> <html> <head> <title> Приклад колонок однакової висоти на CSS </ title> </ head> <body> <div class = "header"> шапка </ div> <div class = "columns "> <div class =" left "> ліва колонка </ div> <div class =" center "> центральна колонка </ div> <div class =" right "> права колонка </ div> </ div> <div class = "footer"> підвал </ div> </ body> </ html>
Крок 2 Залишилося прописати в стилі сайту наступне:
.columns {display: table; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-left: 0; margin-right: 0; } .Columns> div, .columns> noindex> div {display: table-cell; vertical-align: top; width: auto; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Тут ми вказали браузеру, що вимагаємо обгортковий контейнер показувати як блочну таблицю на всю ширину батька, причому для виключення непередбачених спотворень розміри таблиці просимо розглядати по її кордонів (плюс невраховуваних margin -отступи з боків погашаємо навмисно, інакше розмір спотвориться). А вкладені в цю обгортку первородні DIV-и закликаємо показувати як елементу таблиці з подстраиваемой шириною (підстроювання висоти браузер робить сам) і таким же розглядом розмірів осередків по їх кордонів, а не по межах міститься в них контенту.
Замітка В CSS2 не підтримує властивість box-sizing, тому для старих браузерів, в разі необхідності вказати розміри осередків, робити це потрібно за вирахуванням значень border - і padding -отступов.
Крок 3 (опціональний). Тепер якби ми, наприклад, захотіли бічні колонки зробити фіксованого розміру, то в стилях просто потрібно прописати бажані обмежувальні розміри колонок. Припустимо, бажаємо ліву колонку - 300 пікселів, а праву - 200 пікселів і до того ж з відсіканням мимоволі виступили за край частин її вмісту.
.columns> .left, .columns> noindex> .left {max-width: 300px; min-width: 300px; width: 300px; } .Columns> .right, .columns> noindex> .right {max-width: 200px; min-width: 200px; width: 200px; overflow: hidden; }
Замітка Така вказівка спорідненості об'єктів, як використано в продемонстрованому прикладі, необхідно для гарантії спрацьовування стильових правил лише на конкретні колонки, що належать безпосередньо обгортці. А додаткове зарахування випадку з тегом noindex служить меті відпрацювати ситуацію, коли SEO-шник сайту вирішив окрему колонку закрити від індексування пошуковими серверами (нині в будові інтернет магазинів це буває принциповою деталлю).
явні переваги
- проста реалізація;
- гарантована однакова висота колонок;
- колонки легко переставляються місцями при необхідності;
- легко додати додаткові колонки або вилучити зайві;
- колонки запросто ховаються від індексування обертанням в тег noindex;
- це не float -рішення, тому відсутня дефект "зіскакуванню колонки на новий рядок".
Важлива SEO-деталь такого рішення полягає в тому, що стилізація DIV-колонок під елементи таблиці завдає шкоди пошуковому просуванню сторінки. Адже таким чином, щоб стильові правила описують, як елементи розмітки будуть виглядати на екрані браузера, і ні в якому разі не переважають тип вмісту елемента. Тобто в прикладі вище стиль лише наказував браузеру показувати DIV-колонки ПОДІБНО комірок таблиці. Чи не вважати їх осередками, а саме показувати як осередки. Як же браузер і пошуковий робот повинні інтерпретувати елемент, це задано тегом елемента. В даному прикладі розміткою було зазначено, що колонку вимагають інтерпретувати як DIV (division, розділ), але ніяк не TD (table division, розділ таблиці) лише на підставі, що елемент стане зовні схожим на осередок.
недоліки
- не працює в браузерах IE6, IE7 - вони спочатку не підтримують властивість display: table в стилях;
- в браузері Safari 3.1 потрібно подвоєна обгортка DIV-ами - тут властивість display: table-cell дочірнього об'єкта першого споріднення працює при наявності пари батьківських контейнерів, вкладених один в іншій з властивостями display: table і display: table-row;
- не можна використовувати бічні margin -отступи у обгортковий DIV-а, якщо одночасно задаємо йому ширину не в формі width: auto, тому що при розгляді розмірів об'єкта браузер не приймає до уваги розміри margin -отступов, отже правий край об'єкта "поїде" далі покладеного на величину неврахованого відступу;
- у колонок не вийде поставити margin -отступи, тому що браузер ігнорує всіляку маніпуляцію такими відступами в об'єктах з властивістю display: table-cell;
- строго нерухома фіксація ширини колонок незалежно від ширини їх вмісту (тобто коли край колонки не зміститься, навіть якщо нерозривні частини контенту вилізуть за край) зберігається тільки при вказівці трьох обмежувальних розмірів (властивості width, min-width, max-width) в абсолютних одиницях, в той час як використання відносного розміру, скажімо 20%, не гарантує утримання ширини на нерозривному частини контенту, так як неявно дозволяє браузеру автопідстроювання ширини колонки в позику надлишкового простору сусідніх колонок з відноси тельним або width: auto розміром.
живе демо
imperacms.ru/examples/css-div-cells/index.html - ця демонстраційна сторінка зроблена на основі фрагментів викладеного вище коду. Тільки все (html-код і css-правила) об'єднано в один HTML-файл. На додаток колонки розфарбовані різними кольорами і в них доданий багато рядковий контент, щоб відразу був зрозумілий ефект.
