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

Часто при блочной верстке встает проблема выравнивания колонок по высоте. Обычно используют (по крайней мере я использовал) ява скрипты. Но мне это надоело, тем более что часто при их использовании возникал глюк в 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.

Теги: CSS, CSS/html, HTML, web-design

Комментарии ()