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

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

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

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

Как сделать обе колонки одного размера

Эта проблема решается несколькими способами: можно применить метод на основе одного лишь CSS, либо сделать это при помощи Javascript’а. В данном учебнике колонки одинакового размера будут созданы с помощью трех методов CSS и одного метода jQuery. В демо примере видно, как колонки одного размера создаются разными техниками.

Демопример

Относительно расположенный упаковщик

Методом относительно расположенного упаковщика колонки располагаются внутри DIV’а-упаковщика, а затем можно применить к этому DIV’у-упаковщику position: relative. Затем добавить к колонкам position: absolute, установив top: 0, что поместит колонки поверх упаковщика, и установить bottom: 0, отчего они обе окажутся во всю высоту div’а-упаковщика.

<h2>Relative Position Wrapper Solution</h2>

<div class="relative-wrapper">
<div class="column">Loremipsum dolor sit amet, consecteturadipiscingelit. Nulla in tempornisl. Loremipsum dolor sit amet, consecteturadipiscingelit. Proinviverralibero ligula, ac faucibussapienvehiculaquis. Donecpretiumnunc in aliquam dictum. Interdumetmalesuada fames ac ante ipsumprimis in faucibus. Curabiturimperdietvulputatelectus, necpharetraliberovulputate at. Pellentesque at elementummassa. Nunc at dui id sapienpulvinaregestas.</div>
<div class="column">Loremipsum dolor sit amet, consecteturadipiscingelit. Crascursusaugueutegestaslacinia. Cras vitae odiosedestultriciesvariusvelbibendum lacus. Nullaegeteuismodorci, dignissimpellentesque ligula. Aliquammattis vitae ipsumsedpharetra. Suspendisseconsecteturnisl sit ametnislfermentumbibendum. Donec tempus tincidunt nisi, vitae variusvelitvehicula ac. Quisqueviverraauctor dui, a volutpat ante gravidaquis. Integer eratmassa, laciniaut nisi eu, scelerisquemollis magna.
Morbifeugiatpretiumurna, etvolutpat dui lacinia in. Curabiturfringilla lacus risus, veldapibusodiotinciduntnon. Sedsagittisodio sit ametfringillaegestas. Aenean a turpis ac tellushendreritplacerat. Phasellushendrerittellusinterdumbibendumdignissim. Nullafacilisi. Vivamusultricesvehiculanulla a pulvinar. Praesentsuscipiteufelisgravidaluctus. Etiamenim mi, tempus quisconvallisquis, vestibulum sit ameterat. Nam volutpatvariusvelit, aelementumliberotempor id. Pellentesque magna ligula, accumsan sit ametvariusinterdum, mattissuscipitlorem. Maurisullamcorpersem sit ametvolutpatpellentesque. Nuncurna mi, portasedelit ac, sollicitudinvenenatistortor. Vestibulum ante ipsumprimis in faucibusorciluctusetultricesposuerecubiliaCurae;
</div>
</div>
.column
{
font-size: 12px;
color: #FFF;
padding: 20px;
width:400px;
background: red;
margin: 20px;
}

/*****************************************************
 * Относительныйупаковщик
 *****************************************************/
.relative-wrapper
{
position: relative;
width: 100%;
height: auto;
min-height: 450px;
 }
.relative-wrapper .column
{
position: absolute;
top: 0;
bottom: 0;
 }
.relative-wrapper .column:nth-child(2)
{
left: 29%;
 }

Из-за position: absolute нельзя воспользоваться margin для создания отступов между разными колонками, поэтому нам придется применить ко второй колонке свойство left.

Решение проблемы с помощью таблиц CSS

Метод таблиц CSS определяет DIV’ы HTML как таблицу, которая заставит браузер отображать эти элементы в точности так, как они повели бы себя с таблицей HTML. HTML для этой цели может быть в точности таким же, как для относительно расположенного упаковщика: у него имеется DIV-упаковщик с двумя колонками внутри.

<h2>CSS Table Solution</h2>

<div class="css-table-wrapper">
<div class="column">Loremipsum dolor sit amet, consecteturadipiscingelit. Nulla in tempornisl. Loremipsum dolor sit amet, consecteturadipiscingelit. Proinviverralibero ligula, ac faucibussapienvehiculaquis. Donecpretiumnunc in aliquam dictum. Interdumetmalesuada fames ac ante ipsumprimis in faucibus. Curabiturimperdietvulputatelectus, necpharetraliberovulputate at. Pellentesque at elementummassa. Nunc at dui id sapienpulvinaregestas.</div>
<div class="column">Loremipsum dolor sit amet, consecteturadipiscingelit. Crascursusaugueutegestaslacinia. Cras vitae odiosedestultriciesvariusvelbibendum lacus. Nullaegeteuismodorci, dignissimpellentesque ligula. Aliquammattis vitae ipsumsedpharetra. Suspendisseconsecteturnisl sit ametnislfermentumbibendum. Donec tempus tincidunt nisi, vitae variusvelitvehicula ac. Quisqueviverraauctor dui, a volutpat ante gravidaquis. Integer eratmassa, laciniaut nisi eu, scelerisquemollis magna.
Morbifeugiatpretiumurna, etvolutpat dui lacinia in. Curabiturfringilla lacus risus, veldapibusodiotinciduntnon. Sedsagittisodio sit ametfringillaegestas. Aenean a turpis ac tellushendreritplacerat. Phasellushendrerittellusinterdumbibendumdignissim. Nullafacilisi. Vivamusultricesvehiculanulla a pulvinar. Praesentsuscipiteufelisgravidaluctus. Etiamenim mi, tempus quisconvallisquis, vestibulum sit ameterat. Nam volutpatvariusvelit, aelementumliberotempor id. Pellentesque magna ligula, accumsan sit ametvariusinterdum, mattissuscipitlorem. Maurisullamcorpersem sit ametvolutpatpellentesque. Nuncurna mi, portasedelit ac, sollicitudinvenenatistortor. Vestibulum ante ipsumprimis in faucibusorciluctusetultricesposuerecubiliaCurae;
</div>
</div>

Чтобы создать их как таблицу CSS, нужно определить как таблицу DIV-упаковщик; добиться этого можно свойством display со значением table. Далее нам требуется определить колонки как ячейки внутри таблицы, это снова делается с помощью свойства display, на этот раз со значением table-cell. Потом нам остается всего-навсегозаявить, что размер колонок составляет 100% размера таблицы.

.column
{
font-size: 12px;
color: #FFF;
padding: 20px;
width:400px;
background: red;
margin: 20px;
}

/*****************************************************
 * УпаковщиктаблицCSS
 *****************************************************/
.css-table-wrapper
{
display: table;
border-spacing:40px 0;
 }
.css-table-wrapper .column
{
display: table-cell;
height: 100%;
 }

Решение проблемы с помощью таблиц HTML

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

<h2>HTML Table Solution</h2>

<div class="table-wrapper">
<table>
<tr>
<td class="column">Loremipsum dolor sit amet, consecteturadipiscingelit. Nulla in tempornisl. Loremipsum dolor sit amet, consecteturadipiscingelit. Proinviverralibero ligula, ac faucibussapienvehiculaquis. Donecpretiumnunc in aliquam dictum. Interdumetmalesuada fames ac ante ipsumprimis in faucibus. Curabiturimperdietvulputatelectus, necpharetraliberovulputate at. Pellentesque at elementummassa. Nunc at dui id sapienpulvinaregestas.</td>
<td class="column">Loremipsum dolor sit amet, consecteturadipiscingelit. Crascursusaugueutegestaslacinia. Cras vitae odiosedestultriciesvariusvelbibendum lacus. Nullaegeteuismodorci, dignissimpellentesque ligula. Aliquammattis vitae ipsumsedpharetra. Suspendisseconsecteturnisl sit ametnislfermentumbibendum. Donec tempus tincidunt nisi, vitae variusvelitvehicula ac. Quisqueviverraauctor dui, a volutpat ante gravidaquis. Integer eratmassa, laciniaut nisi eu, scelerisquemollis magna.
Morbifeugiatpretiumurna, etvolutpat dui lacinia in. Curabiturfringilla lacus risus, veldapibusodiotinciduntnon. Sedsagittisodio sit ametfringillaegestas. Aenean a turpis ac tellushendreritplacerat. Phasellushendrerittellusinterdumbibendumdignissim. Nullafacilisi. Vivamusultricesvehiculanulla a pulvinar. Praesentsuscipiteufelisgravidaluctus. Etiamenim mi, tempus quisconvallisquis, vestibulum sit ameterat. Nam volutpatvariusvelit, aelementumliberotempor id. Pellentesque magna ligula, accumsan sit ametvariusinterdum, mattissuscipitlorem. Maurisullamcorpersem sit ametvolutpatpellentesque. Nuncurna mi, portasedelit ac, sollicitudinvenenatistortor. Vestibulum ante ipsumprimis in faucibusorciluctusetultricesposuerecubiliaCurae;
</td>
</tr>
</table>
</div>
.column
{
font-size: 12px;
color: #FFF;
padding: 20px;
width:400px;
background: red;
margin: 20px;
}

/*****************************************************
 * УпаковщиктаблицыHTML
 *****************************************************/
.table-wrapper table
{
border-spacing:40px 0;
 }
.table-wrapper table td
{
vertical-align: top;
 }
.table-wrapper .column
{
height: 100%;
 }

Решение проблемы с помощью jQuery

Решение на основе jQuery может вам показаться не самым чистым и красивым, но у него имеется реальное преимущество – не приходится менять ранее созданные HTML и CSS. HTML здесь означает, что у нас окажется просто две заполненные контентом колонки.

<h2>jQuery Solution</h2>

<div class="column">Loremipsum dolor sit amet, consecteturadipiscingelit. Nulla in tempornisl. Loremipsum dolor sit amet, consecteturadipiscingelit. Proinviverralibero ligula, ac faucibussapienvehiculaquis. Donecpretiumnunc in aliquam dictum. Interdumetmalesuada fames ac ante ipsumprimis in faucibus. Curabiturimperdietvulputatelectus, necpharetraliberovulputate at. Pellentesque at elementummassa. Nunc at dui id sapienpulvinaregestas.
</div>

<div class="column">Loremipsum dolor sit amet, consecteturadipiscingelit. Crascursusaugueutegestaslacinia. Cras vitae odiosedestultriciesvariusvelbibendum lacus. Nullaegeteuismodorci, dignissimpellentesque ligula. Aliquammattis vitae ipsumsedpharetra. Suspendisseconsecteturnisl sit ametnislfermentumbibendum. Donec tempus tincidunt nisi, vitae variusvelitvehicula ac. Quisqueviverraauctor dui, a volutpat ante gravidaquis. Integer eratmassa, laciniaut nisi eu, scelerisquemollis magna.
Morbifeugiatpretiumurna, etvolutpat dui lacinia in. Curabiturfringilla lacus risus, veldapibusodiotinciduntnon. Sedsagittisodio sit ametfringillaegestas. Aenean a turpis ac tellushendreritplacerat. Phasellushendrerittellusinterdumbibendumdignissim. Nullafacilisi. Vivamusultricesvehiculanulla a pulvinar. Praesentsuscipiteufelisgravidaluctus. Etiamenim mi, tempus quisconvallisquis, vestibulum sit ameterat. Nam volutpatvariusvelit, aelementumliberotempor id. Pellentesque magna ligula, accumsan sit ametvariusinterdum, mattissuscipitlorem. Maurisullamcorpersem sit ametvolutpatpellentesque. Nuncurna mi, portasedelit ac, sollicitudinvenenatistortor. Vestibulum ante ipsumprimis in faucibusorciluctusetultricesposuerecubiliaCurae;
</div>

В этом решении CSS всего лишь определяет стили DIV’а, делая его определенной ширины с помощью margin, создающих вид колонок.

.column
{
font-size: 12px;
color: #FFF;
padding: 20px;
width:400px;
background: red;
margin: 20px;
float:left;
}

Далее нам требуется создать функцию jQuery, которая изменит размер колонок таким образом, чтобы те стали одинаковой высоты. Следующая функция проведет поиск по всем колонкам и получит высоту самой длинной из них. Затем эту высоту можно сохранить в переменной и поменять колонки так, чтобы они стали равными этой высоте.

function resize_elements( selector )
{
if(selector != '')
    {
var maxHeight = 0;
        $(selector).each(function(){
if(maxHeight< $(this).height())
            {
maxHeight = $(this).height();
            }
        });

if(maxHeight> 0)
        {
            $(selector).height(maxHeight);
        }
}
}

Источник: http://www.paulund.co.uk/

Редакция: Команда webformyself.

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

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

  1. Андрей

    Я решил эту проблему при помощи css:

    table {
    width: 100%; /* Ширина таблицы */
    }
    td {
    padding: 1px; /* Поля в ячейках */
    vertical-align: top; /* Выравнивание по верхнему краю ячеек */
    }

    Все получилось очень просто autoschool-moscow.ru/bita-v-avtomobile.html все колонки таблицы вытянулись по верху, вернее выровнялись.

  2. Александр

    Здравствуйте! Скажите пожалуйста, как реализовать пример на JQ. Не совсем понятно. что передавать сюда:
    functionresize_elements( selector )? Селектор который нужно изменить? Следовательно нужно на JQ, например имя селектора, сохранять в переменную и отправлять в эту функцию. Так понимаю? А как потом вызвать эту функцию? Сделал так: onload=»resize_elements(this.className);» Не работает, при этом ошибок никаких не выдаёт. и у Вас в примере в 5 строчке ошибка (var отдельно нужно).

    • Андрей Кудлай

      Здравствуйте, Александр.
      В функцию достаточно передать тот элемент, для которого функция написана, т.е. колонки — .column:
      resize_elements($('.column'));
      Вызвать функцию можно в тегах script, там же, где эта функция описана.
      Замеченную вами ошибку и еще одну (при объявлении функции) поправили, спасибо за внимательность :)

  3. Александр

    Так заработало

    var selector = «.chiave_parole»;
    resize_elements(selector);

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree