Като Web developer, често ще се сблъскате със ситуация, където трябва да направите еднакво високи елементи – така наречените колони, а то без фиксирана височина.

Понеже height:100% няма да ви свърши работа, вие се изправяте пред ситуация, в която трябва да търсите алтернативни решения. В тази статия ще си покажем няколко от тях, заедно с тяхните минуси и плюсове.

1. Статичен подход

Поради факта, че височината на родителя определя по-високия елемнт, при статични сайтове може да определим коя колона ще е по-високата, и на нея да и добавим background . В този случай, на по-ниската колона ще се вижда background-а на родителя. Ето и пример.

Това е нашия HTML код:

1
2
3
4
5
6
7
8
<div id="container">
  <div id="col-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non velit dolor. Aliquam enim diam, venenatis sed vestibulum accumsan, facilisis interdum lectus.</p>
  </div>
  <div id="col-2">
    <p>Donec nibh neque, tempor vitae convallis non, pharetra sed odio. Donec semper, mauris ac ultricies adipiscing, tortor velit luctus arcu dipiscing elit.</p>
  </div>
</div>

В CSS задаваме цвета на background на родителя и на по-високия елемент. В нашия случай това е елемент с id col-2.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#container {
  width: 600px;
  background: #a5efe6;
}
#container:after {
  display: block;
  content: "";
  clear: both;
}
#col-1 {
  width: 70%;
  float: left;
  padding: 2.5%;
}
#col-2 {
  width: 20%;
  float: left;
  padding: 2.5%;
  background: #ab709e;
}

Този вариант може да използвате само в случая че знаете коя колона ще е по-голяма и ще определя височината на родителя. Поради тази причина, вариантът не е удачен за сайтове с динамично съдържание, каквито са повечето сайтове.

2. Картинка като фон

Едно от най-чести решения е с помощта на картинка, която ширина съответства със ширината на контейнетра където се намират нашите колони, и тя се повтаря със “repeat-y”. Примерна картинка може да изглежда по следващия начин:

Тя ще запълва родителския елемнт по широчина, и ще се повтаря по вертикала

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container {
  width: 600px;
  background: url('imgs/background.png') repeat-y;
}
#container:after {
  display: block;
  content: "";
  clear: both;
}
#col-1 {
  width: 70%;
  float: left;
  padding: 2.5%;
}
#col-2 {
  width: 20%;
  float: left;
  padding: 2.5%;
}

Удобство на този метод е в това, че се поддържа и от по-старите браузри, и че не създава допълнителни бъгове, които възникват дори и в по-новите браузри при конкретни обстоятелства, като например имплементация във WordPress, или при използване на някои developer tools за inspect element.

Метода обаче има и минуси. Единия от тях е факта, че се използва картинка, което малко или много намаля скороста на зареждането на сайта. Втория недостатък е, че при промяна на широчината на колоните, трябва да модифицираме и самата картинка.

3. Flexbox метод

Този метод има малко хекерски стил, но в много случаи ще ви свърши чудесна работа. Става дума за взаимно съдействие между padding и margin. Както е известно, промяна на размерите на padding и margin, влияе на размера на родителя. Стъпвайки върху този факт може да направим следното нещо. При увеличаване на padding, „разпъваме“ размер на родителя, и в същото време при намаляне на margin, размера на родителя обратно намаляме. Ако размер на padding е същ както отрицателна, но съща стойност на margin, то тогава родителя ще има същия размер както би имал при липсата на споменатите paddin и margin. Но самия елемент ще е по-голям, благодарение на padding който сме му задали. Така елементът който има положителен padding и отрицателен margin, ще излиза от границите на родителя. За да скрием това „излизане“ от тези граници, е нужно да прибавим на родителя пропъртито overflow: hidden, което ще скрие част  на елемента, която не искаме да се вижда. Ако стойностите на margin и padding са безкрайно големи (padding положителни а margin отрицателни), то тогава получаваме 2 безкрайно големи елемента, но ще е видима само частта съдържаща контент. В такъв случай, независимо кой от елементите е по-голям – който ще определя размер на родителя, идвата елемента ще са разпънати по целия размер на родителя. Ето и картинка за по-нагледно обяснение.

Съответно нашия CSS ще изглежда по следния начин:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#container {
  width: 600px;
  overflow: hidden;
}
#container:after {
  display: block;
  content: "";
  clear: both;
}
#col-1 {
  width: 70%;
  float: left;
  padding: 2.5%;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
  background: #a5efe6;
}
#col-2 {
  width: 20%;
  float: left;
  padding: 2.5%;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
  background: #ab709e;
}

Силна страна на това решение е, че може свободно да променяте широчината на колините, без допълнителни обработки на background картинки.

Както обаче и предишните решения, и това има свои минуси. Най-големия с който се сблъснах се появи при имлементацията на сайта във WordPress, когато дизайна се счупи, и трябваше променя подход към проблема и да избера друг метод за еднакво високи колони. Другия недостатък на този подход е, че при използване на някои developer tools за inspect element, елементът неприятно се отмества надолу, което малко затруднява работата на разработчика. Също така не може да приложите метода, ако вашия контейнер, съдържащт колоните, трябва да има стойност на пропъртито overflow различна от hidden. Въпреки обаче тези недостатъци, този подход остава един от най-популярните.

 

4. Метод на Doug Neiner

Малко нестандартен подход от Doug Neiner е подобен на метода с картинката повтаряща се вертикално ( който споменахме във втора точка). Тук обаче вместо картинка използваме градиент. Можеби на пръв поглед звучи странно, но решението е много хитро. За да постигнем желания резултат, създаваме на родителския елемент – контейнер, хоризонтален градиент, използвайки „stop“ точки на градиента. Там, където искаме да имаме граница между колоните, добавяме два stop със различни цветове. Първия е цвета от предишната точка а вторич е цвета на следващата точка. Така всъщност вместо плавия gradient получаваме остро ограничено преминаване от единия цвят към другия.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#container {
  width: 600px;
}
#container:after {
  display: block;
  content: "";
  clear: both;
}
#col-1 {
  width: 70%;
  float: left;
  padding: 2.5%;
}
#col-2 {
  width: 20%;
  float: left;
  padding: 2.5%;
}
#container { 
  background: #ddd; /* Old browsers */
  background: -moz-linear-gradient(left,  #ddd 0%, #ddd 75%, #aaa 75%, #aaa 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ddd), color-stop (75%,#ddd), color-stop(75%,#aaa), color-stop(100%,#aaa)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #ddd 0%,#ddd 75%,#aaa 75%,#aaa 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #ddd 0%,#ddd 75%,#aaa 75%,#aaa 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #ddd 0%,#ddd 75%,#aaa 75%,#aaa 100%); /* IE10+ */
  background: linear-gradient(to right,  #ddd 0%,#ddd 75%,#aaa 75%,#aaa 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#aaa',GradientType=1 ); /* IE6-9 */
}

5. Метод с разместване

Или метод а на Mathew Taylor се основава на създаване на помощтни родителски елемент и негоеото хоризонтално разместване. Ако в нашия случай имаме HTML код

1
2
3
4
5
6
7
8
<div id="container">
  <div id="col-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non velit dolor. Aliquam enim diam, venenatis sed vestibulum accumsan, facilisis interdum lectus.</p>
  </div>
  <div id="col-2">
    <p>Donec nibh neque, tempor vitae convallis non, pharetra sed odio. Donec semper, mauris ac ultricies adipiscing, tortor velit luctus arcu dipiscing elit.</p>
  </div>
</div>

То след добавяне на родителсия елемент, той ще изглежда по следния начин:

1
2
3
4
5
6
7
8
9
10
<div id="newContainer">
  <div id="container">
    <div id="col-1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non velit dolor. Aliquam enim diam, venenatis sed vestibulum accumsan, facilisis interdum lectus.</p>
    </div>
    <div id="col-2">
      <p>Donec nibh neque, tempor vitae convallis non, pharetra sed odio. Donec semper, mauris ac ultricies adipiscing, tortor velit luctus arcu dipiscing elit.</p>
    </div>
  </div>
</div>

На вънчния контейнер му добавяме background който искаме да има дясната колона, а на вътрешния пък който трябва да има дясната колона. Понеже идвата контейнера имат различен background, то при разместване на първоначалния контайнер вляво, ще се вижда част от background-а на newContainer, която ще бъде толкова широка, колко е стойност на хоризонталното разместване. За да симълираме дясната колона, разместването е равно на чирината на колоната.

Ето и CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#newContainer {
  float: left;
  background: #ab709e;
}
#container {
  width: 600px;
  position:relative;
  right:25%;
 
  background: #a5efe6;
}
#container:after {
  display: block;
  content: "";
  clear: both;
}
#col-1 {
  width: 70%;
  float: left;
  padding: 2.5%;
  position: relative;
}
#col-2 {
  width: 20%;
  float: left;
  padding: 2.5%;
  position: relative;
}

За да върнем колоните в първоначалната позиция, ще им добавим и relative position което ще е равно на разместването на родителя. Остава само да зачистим вътрешния контейнер, което става с добавяне на CSS пропърти на външния overflow: hidden. Крайния CSS ще изглежда по следния начин:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#newContainer {
  float: left;
  overflow: hidden;
  background: #ab709e;
}
#container {
  width: 600px;
  position:relative;
  right:25%;
 
  background: #a5efe6;
}
#container:after {
  display: block;
  content: "";
  clear: both;
}
#col-1 {
  width: 70%;
  float: left;
  padding: 2.5%;
  position: relative;
  left: 25%;
}
#col-2 {
  width: 20%;
  float: left;
  padding: 2.5%;
  position: relative;
  left: 25%;
}

Между уеб разработчици има и много други методи на решаване на този проблем, и можеби и вие ще откриете нов подход . Всеки от споменатите решения, има свои силни и слаби места, поради което е добре за всеки конкретен случай да се избере най-подходящия вариант, с който да постигнете очаквания резултат, без колкото се може допълнителни проблеми които биха могли да възникнат.