search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS] Kolumny o tej samej wysokości

Zapewne wielu z Was spotkało się z problemem: "Jak wyrównać wysokosć kolumn, aby jedna nie była krótsza od drugiej?" i miało problem z zaimplementowaniem odpowiedniego mechanizmu wyrównującego na stronie.
Postanowiłem Wam pomóc zamieszczając przykładowy kod dla strony z wyrównaniem.

<div id="main">
<div id="sidebar">
<h2>Lorem ipsum sit ei sonet exerci feugait.</h2>
 
In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.
</div>
<div id="tresc">
<h2>Lorem ipsum sit ei sonet exerci feugait.</h2>
 
In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.
 
In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.
 
In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.
<h2>Lorem ipsum sit ei sonet exerci feugait.</h2>
 
In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.
<h2>Lorem ipsum sit ei sonet exerci feugait.</h2>
 
In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.
<h2>Lorem ipsum sit ei sonet exerci feugait.</h2>
 
In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.
</div>
</div>

Do tego dodałem odpowiednie style:

#main {
	width: 100%;
	clear: both;
	height: 100%;
	overflow: hidden;
}
#sidebar {
	width: 30%;
	margin: 0 0 -20000px 5px;
	padding-bottom: 20000px;
	height: 100%;
	background: #ffe6c5;
	float: left;
}
#tresc {
	width: 65%;
	padding: 0 0 0 15px;
	float: left;
	height: 100%;
	background: #CCCCCC;
	margin-bottom: -20000px;
	padding-bottom: 20000px;
}

Pewnie jesteście zaskoczeni tak wielkimi marginesami i paddingiem. Takie zastosowanie tych dwóch atrybutów wspólnie z overflow: hidden dla #main pozwala na odpowiednie wyrównanie tych dwóch kolumn.
Demo z tego przykładu.

  • Hi, interest post. I’ll write you later about few questions!

  • Hi. I like the way you write. Will you post some more articles?

  • hi, thanks for reading my articles 🙂 I will write more articles when I find something that might be interesting for the readers of my blog 🙂

  • hello, what kind of questions do you have?

  • Wodzu

    Dobre! Ale jak by to mogło wyglądać ze zmienną wysokością kolumn, w zależności od zawartości kolumn? (czyli bez height: 100%; overflow: hidden;)