Одним із складних моментів при використанні CSS є установка однакової висоти для колонок. Існують різні методи, кожен з яких має свої плюси і мінуси. В даному уроці ми розглянемо чотири з них.
Що ми маємо на увазі під колонками рівної висоти?
Такий ефект може бути досягнутий за рахунок використання фону CSS, який буде мати однакову висоту для колонок.
Це досить старий трюк, який широко використовується для створення колонок однакової висоти.
Полягає він у використанні фонового зображення, яке повторюється по вертикалі. Приклад такого зображення наведено нижче (в цілях наочності він трохи збільшений).
Таке зображення, як правило, має 1 px у висоту і ширину, рівну ширині шаблону.
У прикладі використовується наступна розмітка:
В якості контейнера можна використовувати тег body. У прикладі використовується окремий елемент div для демонстрації можливості застосування методу до частини змісту сторінки.
Код CSS вельми простий. Зміщуємо плаваючі блоки #sidebar і #content вліво і встановлюємо відповідну ширину для них. Встановлюємо відступи для контейнера #container.
В якості фону для контейнера ми використовуємо зображення faux-column.png (саме таке, як описувалося вище). Також для нього встановлюється властивість overflow: hidden. Воно потрібне для того, щоб запобігти згортання контейнера.
Контейнер завжди буде мати таку ж висоту, як і найбільша колонка. Фонове зображення тому буде виглядати так, як ніби колонки мають однакову висоту.
Даний метод найкраще використовувати в фіксованих шаблонах, але він може з успіхом застосовуватися і на більшості плаваючих шаблонів.
Ви також можете використовувати весь спектр візуальних засобів для фону (тіні, рамки і так далі). Також можна задіяти зображення більш ніж 1 px у висоту.
- Просто реалізувати ..
- Працює незалежно від висоти колонки.
- Потрібно зображення, яке використовує додатковий запит HTTP.
- Зміни в шаблоні вимагають змін в зображеннях.
Даний метод також використовує установки фону для контейнера. Незважаючи на те, що метод псевдо колонок має обмежене застосування, він дуже простий і працює відмінно.
Розмітка використовується така ж, як і в попередньому методі:
Код CSS також вельми простий. У прикладі використовується плаваюча ширина колонок, але також можна використовувати і фіксовані значення.
Ми встановили фоновий колір для елементів #content і #sidebar. Обов'язково потрібно встановлювати колір для тієї колонки, яка передбачається бути найдовшою.
Основна відмінність від методу фальшивих колонок полягає в використанні фонового кольору, замість зображення. Принцип дії той же - контейнер з фоном розтягується по висоті більш високою колонки, і формується картина, на якій здається, що все колонки мають однакову висоту.
- Легко реалізувати.
- Легко підтримувати.
- Важко реалізувати для кількості колонок більше 2.
- Потрібне знання, яка колонка буде довшим.
- Чи не працює в шаблонах, коли на різних сторінках одна і та ж колонка виявляється то довше всіх, то коротше.
Даний метод використовує рамки колонок і негативні відступи для формування ілюзії рівної висоти колонок.
Розмітка HTML нічим не відрізняється від попередніх методів:
А ось код CSS цікавіший. Контейнер має фіксовану ширину і центрується на сторінці. А властивості для елементів #sidebar і #content мають цікаві значення:
Всі кольори, які використовуються в даному методі, встановлюються у властивостях елементу #content. Для нього встановлюється фоновий колір і задається ширина рамки рівній ширині бічній панелі. Колір рамки використовується той, який передбачається для фону бічній панелі.
Першим кроком задаємо для правого відступу бічній панелі від'ємне значення рівне її ширині. Так вона засувається назад на екран. Проблема тепер в порядку накладення елементів один на одного. Елемент #sidebar розташовується зверху. Щоб повернути бічну панель наверх, встановлюємо для неї властивість position: relative.
- Працює незалежно від того, яка колонка довше.
- Просто встановити.
- Легко підтримувати.
- Бічна панель повинна мати фіксоване значення ширини, так як властивість border-width сприймає тільки абсолютні величини.
- Негативні значення відступів можуть не сприйматися в старих версіях IE.
Даний метод більш складний для розуміння, ніж інші.
У розмітці додається додатковий елемент div.
Код CSS для даного методу більш складний, ніж для вище описаних способів вирівнювання. Для обох елементів #sidebar і #content задаються властивості зміщення вліво і ширина, а також дещо додатково.
Спочатку робимо плаваючими колонки і контейнери. У прикладі все зміщується вліво, але напрямок зміщення великої ролі не грає.
Потім встановлюємо фон для двох контейнерів div. Внутрішній контейнер має фон бічній панелі, в зовнішній - фон основного змісту.
Якщо зараз перевірити, що виводить браузер, то буде видно тільки фон внутрішнього контейнера, так як він розташовується вище в порядку накладення елементів.
Для позиціонування внутрішнього контейнера встановлюємо для його властивості right значення 75%, що дорівнює ширині колонки основного змісту.
Встановлюємо відносне позиціонування і значення властивості left рівним 75%, щоб зрушити все вправо.
- Метод працює незалежно від ширини колонок
- Метод працює в будь-яких шаблонах.
- Можна формувати скільки завгодно колонок.
- Метод досить складний для розуміння.
- Потрібно додатковий елемент div.
висновок
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!