[CSS] Kolumny o tej samej wysokości
Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
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.
O autorze
