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

Дата публикации: 2014-05-09

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

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

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

Эта проблема решается несколькими способами: можно применить метод на основе одного лишь 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>

<h2>Relative Position Wrapper 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>

.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%;
 }

.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>

<h2>CSS Table Solution</h2>

</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%;
 }

.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>

<h2>HTML Table Solution</h2>

<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.

</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%;
 }

.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>

<h2>jQuery Solution</h2>

</div>

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

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

.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);
        }
}
}

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);

}

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

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

Метки: верстка, колонки одной высоты

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

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

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

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

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

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

Похожие статьи:

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

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

Материалы

Мы в соц. сетях

Связь

Информация