kursy tutoriale

Równej wysokości kolumny / elementy obok siebie na stronie internetowej

Czas czytania: 2 minut

Dość częstym problemem przy budowaniu strony internetowej jest utworzenie kolumn (zbudowanych np. DIV) o równej wysokości.

See the Pen Equal to the height of the column CSS by Aura (@Julka85) on CodePen.dark

Po co nam równe kolumny?

Nie oszukujmy się chodzi głownie o estetykę. Kolumny o różnej wysokości mogą spowodować, że elementy zaczną się na siebie nasuwać lub będą znajdowały się w nie koniecznie odpowiednich miejscach.

Wyrównanie dwóch kolumn z pewnością nikomu nie sprawia większego problemu, ale w momencie kiedy ilość kolumn zostanie zwiększona np. do trzech wtedy sprawa zaczyna się już komplikować.

równej wysokości kolumny

Z pomocą CSS możemy uzyskać efekt równej wysokości trzech lub większej ilości kolumn na różne sposoby. Kilka przykładowych pokażę poniżej.

Wyrównanie wysokości z CSS3 Flexbox

Aktualnie jest to jedna z popularniejszych metod z wykorzystaniem funkcji dostępnych w CSS3.  Głównym powodem jest łatwość zastosowania oraz coraz to większa popularność Flexbox. W przypadku korzsystania z  Bootstrap 4+ kod będzie trzeba trochę zmodyfikować w każdym innym przypadku wygląda on tak:

Przykładowa zawartość 3 kolumn:

<div class="flex-container">
  <div class="flex-item item1">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
  <div class="flex-item item2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin.</div>
  <div class="flex-item item3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>  
</div>

Kod CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    background-color: gray;
}

.flex-item {
    background-color: teal;
}

.item1 {
    width:35%;
}

.item2 {
    width:35%;
	background-color: gray;
}

.item3 {
    width:35%;
}

Powyższy kod powinien być interpretowany przez większość przeglądarek internetowych.

Dzięki właściwości (display: flex;) możemy obok siebie ustawiać wiele różnych elementów. Ważne jest jednak by posiadały one odpowiednią szerokość dostosowaną do naszej strony.

Warto pamiętać, że przypadku stron RWD na zwężonym ekranie flex może powodować problemy. Trzeba więc tę wartość zmienić.

Wyrównanie wysokości z marginesami

Inną metodą utworzenia równych kolumn jest zastosowanie marginesów. Zaczynamy podobnie jak w poprzednim przykładzie:

<div id="wrapper">
<div id="block_1">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>
<div id="block_2">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, 
</div>
<div id="block_3">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque
</div>
</div>

Zmiana następuje dopiero w CSS. Użyjemy zmienną „display: inline;” oraz odpowiednio ustawione marginesy

#block_1
	{
	float: left;
	width: 34%;
	margin-left: 33%;
	background:#eee;
	}
* html #block_1
	{
	display: inline;
	}
#block_2
	{
	float: left;
	width: 33%;
	margin-left: -67%;
	background:#ccc;
	}
#block_3
	{
	float: left;
	width: 33%;
	background:#eee;
	}

#block_1, #block_2, #block_3
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}

#wrapper
	{
	overflow: hidden; 
	}

#wrapper
	{
	float: left;
	float/**/: none;
	}
/* easy clearing */
#wrapper:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#wrapper
	{
	display: inline-block;
	background:#3e3e3e;
	}

#wrapper
	{
	display: block;
	}

Dzięki poniższemu ustawieniu wszystkie elementy wychodzące poza element będą niewidoczne.

#wrapper
	{
	overflow: hidden; 
	}

Teraz wystarczy tylko:

#block_1, #block_2, #block_3
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}

Te 2 elementy są w powyższym kodzie najistotniejsze. Tak naprawdę pozostałe elementy możemy dowolnie ustawiać.

Jak widzicie istnieje kilka metod na uzyskanie równych kolumn. Powyższe kody mogą inaczej działać na różnych przeglądarkach.

See the Pen Equal to the height of the column CSS by Aura (@Julka85) on CodePen.dark

Źródło:

http://www.positioniseverything.net/articles/onetruelayout/equalheight