4 методи створення колонок однакової висоти

Стивен Бредли

Оригінал: http://www.vanseodesign.com/css/equal-height-columns/

Переклад: Влад Мержевич

Створення колонок однакової висоти за допомогою CSS може бути викликом. У цій статті розглядаються чотири методи, які можуть допомогти досягти цієї мети.

Детальніше читайте за посиланням.

Фіктивні колонки

Фіктивні колонки — це метод, який існує вже давно. Цей простий трюк використовує фонове зображення, яке повторюється по вертикалі.

HTML

Простий HTML код для використання цього методу.

CSS

Простий CSS код для налаштування фіктивних колонок.

Більше деталей за посиланням.

Псевдоколонки

Цей метод застосовує фон до контейнера, щоб створити ефект колонок однакової висоти.

HTML

HTML код для застосування псевдоколонок.

CSS

CSS код для створення псевдоколонок.

Детальніше читайте за посиланням.

Границі і від'ємні відступи

Цей метод використовує границі і від'ємні відступи для створення вигляду колонок однакової висоти.

HTML

HTML код для використання цього методу.

CSS

Простий CSS код для застосування границь і від'ємних відступів.

Більше деталей за посиланням.

Зміщення колонок і контейнера

Останній метод, який пропонує Меттью Джеймс Тейлор, працює в різних випадках використання.

HTML

HTML для застосування цього методу.

CSS

Складний CSS код для створення зміщених колонок і контейнера.

Детальніше читайте за посиланням.

Додаткові ресурси

Інші методи створення колонок однакової висоти можна знайти в цій статті.

Резюме

Створення колонок однакової висоти може бути складно, але вибраний метод може значно полегшити цей процес.

Більше інформації в оригінальній статті.

Часті запитання