Колонки одинаковой высоты

Очень часто, при верстке сайтов, возникает необходимость создать колонки одинаковой высоты, т.е. независимо от того, сколько контента содержится в каждом блоке, все эти блоки должны равномерно растягиваться по вертикали и иметь равную высоту.

При табличной верстке, это сделать очень легко. Нам просто нужно создать таблицу с двумя или более колонками и все они автоматически будут иметь одинаковую высоту.

Но с блочной версткой не все так просто. Ведь высота блока зависит от контента расположенного в нем. Поэтому, чтобы добиться требуемого результата, приходится искать всевозможные решения.

Цель, которой нам следует добиться, приведена на изображении ниже.

Как сделать колонки одинаковой высоты

И в данном видеоуроке, я как раз расскажу вам о наиболее частых способах создания колонок равной высоты при блочной верстке.

Все эти способы мы будем разбирать на примере 3-х колоночного сайта (разумеется их можно применять и для 2-х колоночных сайтов тоже).

Смотреть видеоурок

В данном уроке я разобрал наиболее частые способы:

Способ 1 – Использование JavaScript

Способ 2 – Использование свойства display: table

Способ 3 – Использование padding + margin + overflow

Разумеется существуют и другие, более экзотические способы, но на мой взгляд у многих из них есть куча недостатков. Например, в некоторых случаях приходится изменять HTML-разметку, что естественно усложнить читабельность кода или приходится применяется дополнительное изображение в качестве фоновой картинки, что также не является хорошим способом.

В любом случае, как вы поняли, отличного решения, которое на 100% избавит от проблемы – нет, поэтому приходится выбирать наиболее оптимальное из того что есть.

Добавить комментарий