AAiddennium » BLOG «

Dar nuo tų laikų, kai svetainių išdėstymui tapo nerekomenduotina naudoti lenteles, karts nuo karto susidurdavau su tokia bėda: „Kaip nustatyti keliems varijuojančio turinio stulpeliams vienodą aukštį?“ Internete būdavo siūlymų stulpelių konteineriui naudoti vertikaliai ištęstą foninį paveikslėlį su stulpelių spalvom arba papildomą Javascriptą, kuris suranda aukščiausią stulpelį ir likusiems nurodo tokį patį aukštį. Tačiau šie variantai buvo pernelyg riboti ir gremėzdiški (palikim Javascript rimtesniems funkcionalumams nei išvaizdos tvarkymas). Vos prieš kelias dienas kolega, dirbantis su HTML šablonais, man parodė geresnį Alex Robinson sprendimą.

Šiame tekste mano terminologija tokia: konteineris yra HTML elementas, kurio vaikai bus vadinami stulpeliais, kai šie vizualiai išdėstyti horizontaliai vienas šalia kito. Standartiniai konteinerių ir stulpelių pavyzdžiai galėtų būti tokie:

• Horizontaliai į kokias tris dalis perskelto paties puslapio išdėstymas. Trys div elementai apgaubti ketvirtuoju div.
• Horizontaliai atvaizduotas navigacinis meniu. Elementas ul su vaikučiais li.
• Tiesiog į tinklelį (angl. grid) įpaišytos galerijos nuotraukos. Elemente div, atstojančiame eilutę, surikiuoti div elementai – nuotraukų konteineriukai su aprašymais ir nuorodom.

Visais šiais atvejais stulpeliais vadinami elementai CSS pagalba vizualiai išdėliojami horizontaliai: jiems priskiriami pločiai ir tada jie float: left ar float: right pagalba sustumiami į kurį kraštą. Apie stulpelinius išdėstymus daugiau nesiplėtosiu. Pereikime prie problemos ir sprendimo.

Atrodytų, kad skirtingų stulpelių aukščius būtų galima pagal aukščiausiąjį suvienodint per CSS parametrą height, bet reikia atsižvelgti, kad svetainės lankytojas naršyklėje gali kaitalioti tekstų aukščius View → Text Size nustatymuose. Be to statiškų svetainių laikai jau seniai praėję ir daugiausiai šiais laikais dirbame su kintančiu naudotojo generuojamu turiniu. Taigi standartiškai stulpelis turės aukštį, kuris bus kintamas, priklausomai nuo jo turinio kiekio.

Alex Robinson siūlomas sprendimas yra visiems šiems stulpeliams nurodyti nepadoriai didelę apatinę vidinę paraštę padding-bottom ir tuomet iškart išminusuot susidariusį atstumą neigiama apatine išorine parašte margin-bottom. Primiršusiems CSS dėžės modelį, primenu, kad HTML elemento fonas background, kurį tikriausiai norėsit nustatyti, yra paties turinio ir jo vidinių paraščių padding dalis. Stulpelių konteineriui nurodžius slėpti perpildymą overflow: hidden, turėsim vizualiai vienodo aukščio elementus. Be galo dideliu paraštės dydžiu turėtų būti pasirinktas toks aukštis, kurio niekada neviršys vieno stulpelio sugeneruotas turinys. Taigi jei kalba eina apie 1-3 teksto eilučių meniu punktus, tuomet užtektų ir kokių 100px.

#blokas_A, #blokas_B, #blokas_C {
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	}
#konteineris {
	overflow: hidden;
	}

Apie įvairias šio triuko išimtis skirtingose naršyklėse skaityk Position Is Everything. Yra ten ir kitų įdomių sprendimų, į kuriuos pats žadu prie progos pasigilinti (bet jau apie tai atskiro įrašo tikrai nerašysiu ). Apie kintamus aukščius turėtų suprasti ir į tai atsižvelgti ne tik šablonų maketuotojai, bet ir interneto dizaineriai. Bet čia jau visai kita tema.. O dabar einu gamint kūčiukų.