Крос-браузерні CSS-рішення створення колонок з рівною висотою
Геніальне і просте рішення запропонував Matthew James Taylor в своїй статті . Дане рішення засноване на чистому CSS без хаков, без застосування картинок і Java-Script. У своїй статті Метью спочатку описує саму проблему створення колонок з рівною висотою, а потім пропонує саме рішення проблеми.
проблема
Я не буду описувати повністю всю проблему створення блоків (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 у блоків з контентом і «передати» його «контейнерів-обгортці».
А так виглядає розмітка цього прикладу:
<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, в якому описані зазначені вище процедури:
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.
Дивимося 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%.
кінцевий 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
Для тих кому набридла верстка і захотілося екзотики є нерухомість в Чорногорії - вілли, будинки, квартири. У кого на що вистачить?
А якщо ви раптом затіяли соціальний проект, то вам обов'язково знадобитися зовнішня соціальна реклама