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

22 Фев
2010

Часто при блочной верстке встает проблема выравнивания колонок по высоте. Обычно используют (по крайней мере я использовал) ява скрипты. Но мне это надоело, тем более что часто при их использовании возникал глюк в IE — при скроле страницы до самого низа, скрипт скролил обратно и в зависимости от версии этого саомго IE, скролил он на разные высоты — от 5px да 150px вверх. Меня это жутко раздражало, поэтому я все время искал, как бы сделать выравнивание колонок средствами c CSS. Способ нашелся!

И так, суть метода заключается в том, что мы сначала задаем этим колонками максимальный padding по низу, и в этоже время такой же но отрицательный margin, все по тому же низу. Дальше оборачиваем колонки, которые надо выровнять еще одним слоем, и задаем ему overflow: hidden. В итоге, получаем выровненные колонки.

Текст Вот так выглядит CSS:

#wrapper{
 overflow: hidden;
 width: 100%
}
#menuColumn {
 float: left;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
#ContentColumn {
 float: right;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}

Пример работы тут

Внимание!

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

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

Если кто то знает, как справиться с данной проблемой, пожалуйста напишите в комментариях.
Пример глюка тут

Благодарность за найденную проблему выписывается пользователю evgenik

2leep.com

14 комментариев к записи Колонки одинаковой высоты средствами только CSS

Avatar

VRS

30th Май 2010 в 2:28

Потрясающе! Спасибо огромное за решение. Уже просмотрела с десяток сайтов, как выровнять колонки, много оберток, сдвигов и кода, а благодаря Вашему решению, все решилось 4-мя дополнительными строчками.

Avatar

R@Me0

30th Май 2010 в 12:20

Пожалуйста. Рад что пригодилось

Avatar

Наташа

20th Июнь 2010 в 19:36

ещё короче:

#wrapper{
overflow: hidden;
width: 100%
}
#menuColumn {
float: left;
top: 0;
heigh: 5000px;
}
#ContentColumn {
float: right;
top: 0;
height: 5000px;
}

Avatar

R@Me0

20th Июнь 2010 в 20:16

Такой код короткий — да. Работоспособный — нет. Таким способом, у вас документ становится высотой 5000px. Используя метод из поста, документ в высоту равен высоте либо контента, либо меню, смотря что выше.

Avatar

re

6th Август 2010 в 18:27

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

Avatar

R@Me0

6th Август 2010 в 18:47

Специально для вас, добавил в пример футер. Отлично работает, и ни каких сотен экранов вниз.

Avatar

Сергей

22nd Август 2010 в 16:58

Спасибо огромное автору! долгое время не мог решить эту проблему! =)

Avatar

R@Me0

22nd Август 2010 в 21:45

Всегда пожалуйста.

Avatar

evgenik

16th Октябрь 2010 в 3:28

Скажите пожалуйста в данной реализации не возникала ни у кого проблемы с якорями?
В теле страницы, например в нижней её части, разместили якорь и ссылаемся на него по ссылке. В итоге якорь с страницей проматывается на самый верху видимой области и отсутствует возможность перетащить ползунок на верх — он остается установленным в крайнее верхнее положение т.е. просмотреть начало страницы нельзя.

Avatar

R@Me0

16th Октябрь 2010 в 5:55

evgenik, дайте, пожалуйста ссылку на страницу, где это происходит. Я с таким пока что не встречался.

Avatar

golavskiydm

14th Июнь 2011 в 12:45

Ищу как реализовать выравнивание столбцов через js, в сети наоборот только через CSS. Js один раз подключил и забыл
Один Js нашел, но выравнивает криво и с багами

Avatar

R@Me0

14th Июнь 2011 в 12:50

golavskiydm, был у меня такой скрипт где то… Реализован был на JQuery. Там всего пара десятков строк кода. Если найду, выложу.

Avatar

el.facer

21st Февраль 2012 в 21:41

Вот только в этом способе есть один минус. Свойство border-radius не будет отображать нижнего округленного угла.

Avatar

R@Me0

21st Февраль 2012 в 22:35

Да, есть такое дело. Но вы не учли тот момент, что статья писалась еще 2 года назад, а метод изобрели и того раньше 😉

Оставить комментарий или два

*

Наверх