Колонки однієї висоти

15

Від автора: Якщо вам доводиться відображати на веб-сторінці безліч колонок, то ви напевно вже зіткнулися свопросом, коли потрібно, щоб всі ці колонки були однієї висоти. Проблема в тому, що коли в них міститься різний вміст, деякі колонки будуть більше інших, що порушить дизайн сайту.

Колонки однієї висоти

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

Колонки однієї висоти

Як зробити обидві колонки одного розміру

Ця проблема вирішується декількома способами: можна застосувати метод на основі одного лише CSS, або зробити це за допомогою Javascript’а. В даному підручнику колонки однакового розміру будуть створені за допомогою трьох методів CSS і одного методу jQuery. У демо прикладі видно, як колонки одного розміру створюються різними техніками.

Демопример

Щодо розташований пакувальник

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

Relative Position Wrapper Solution

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

.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-пакувальник з двома колонками всередині.

CSS Table Solution

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

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

.column
{
font-size: 12px;
color: #FFF;
padding: 20px;
width:400px;
background: red;
margin: 20px;
}
/*****************************************************
* УпаковщиктаблицСЅЅ
*****************************************************/
.css-table-wrapper
{
display: table;
border-spacing:40px 0;
}
.css-table-wrapper .column
{
display: table cell;
height: 100%;
}

Вирішення проблеми за допомогою таблиць HTML

Вирішення проблеми за допомогою HTML– це старомодний спосіб фіксування розмітки веб-сайту до застосування CSS, і все, що потрібно зробити, щоб переконатися, що висота обох колонок складає 100% висоти таблиці.

HTML Table Solution

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

.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 тут означає, що у нас виявиться просто дві заповнені контентом колонки.

jQuery Solution

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

У цьому рішенні 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 0)
{
$(selector).height(maxHeight);
}
}
}