[CSS] Kolumny o tej samej wysokości
This post is 17 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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.
About the author
