Share
Există o problemă familiară în ceea ce privește designul de web care a existat încă de când am trecut de zilele designului de tabel în era CSS, și anume:
Cum pot avea fundaluri de înălțime de 100% în configurația flexibilă în mai multe coloane?
Există câteva soluții la această dilemă. Cu toate acestea, cel pe care urmează să-l acoperim ar putea fi potrivit pentru proiectul dvs. dacă aveți nevoie de:
O opțiune este să comandați una dintre serviciile rapide și eficiente de personalizare a site-ului web de la Envato Studio. Puteți alege dintr-o varietate de furnizori cu experiență, puteți verifica recenziile acestora și apoi le puteți trimite detalii despre modificările exacte de care aveți nevoie.
Altfel, să începem cu o privire rapidă asupra problemei.
Imaginea de mai jos este o structură simplă cu trei coloane, folosind o abordare standard de plutire a fiecărei coloane spre stânga. Cu fundaluri aplicate în mod implicit, coloanele se ajustează la înălțimea conținutului lor, astfel:
Acest lucru este funcțional, dar nu chiar cel mai plăcut aspect al ochiului datorită diferenței semnificative de înălțimi.
HTML pentru cele de mai sus plasează trei elemente "conținutul coloanei" într-un înveliș:
.........
CSS pentru aceste elemente de "coloană" este:
.conținut lățime: 60%; plutește la stânga; padding: 20px 30px; fundal: #fff; culoare: # 6d7072; sidebar lățime: 20%; plutește la stânga; padding: 20px 30px; fundal: # 5f6673; culoare: # ebeef3; font-size: 90%; . sidebar_two lățime: 20%; plutește la stânga; padding: 20px 30px; fundal: # 434750; culoare: # ebeef3; font-size: 90%;
Când ne referim la coloanele cu înălțime egală, ceea ce în mod obișnuit vrem este să satisfacem două condiții:
În exemplul nostru de mai sus avem deja prima condiție de înălțime flexibilă satisfăcută. Cu toate acestea, stilurile de fundal și regulile de înălțime flexibile fac parte din aceeași clasă, aplicate aceluiași element. Indiferent de regulile de înălțime care respectă elementul, fundalul va urma și ele.
Prin urmare, dacă dorim ca fundalurile să aibă setări de înălțime diferite, vom avea nevoie de elemente separate pe care le putem aplica stilurile de fundal împreună cu setul propriu de reguli de înălțime. Pentru a crea aceste elemente separate fără a adăuga marcări suplimentare, vom folosi pseudo-elementele.
Pentru fiecare coloană vom folosi :inainte de pseudo-selector pentru a genera un pseudo-element separat, la care vom aplica stilul de fundal. Apoi vom folosi o combinație de poziționare absolută și z-index pentru a plasa aceste fundaluri în spatele conținutului pentru fiecare coloană și a le seta la o înălțime uniformă.
Noul CSS pentru fiecare coloană devine:
.conținut, .content: înainte de latime: 60%; .content float: left; padding: 20px 30px; culoare: # 6d7072; .content: înainte de content: "; position: absolute; top: 0; bottom: 0; z-index: -1; left: 0; background: #fff;
.bara laterală, .bar: înainte de latime: 20%; sidebar float: left; padding: 20px 30px; culoare: # ebeef3; font-size: 90%; sidebar: înainte de content: "; position: absolute; top: 0; bottom: 0; z-index: -1; stânga: 60%;
.sidebar_two, .sidebar_two: înainte de width: 20%; .sidebar_two float: left; padding: 20px 30px; culoare: # ebeef3; font-size: 90%; sidebar_two: înainte de content: "; position: absolute; top: 0; bottom: 0; z-index: -1; stânga: 80%; culoarea de fundal: # 434750;
Ceea ce ne oferă o prezentare de înălțimi frumoase, chiar de coloană:
Pe scurt, ceea ce facem aici este poziționarea absolută a pseudo-elementelor "deținător de fond" în spatele elementelor obișnuite de "coloană" pentru a crea stiluri de fundal.
Deoarece aceste pseudo-elemente de "suport de fond" sunt absolut poziționate, le putem spune exact unde trebuie să fie margini exterioare, permițând în același timp elementele "conținutului coloanei" să fie orice înălțime sau lățime, trebuie să fie.
Accentsconagua
.împacheta element, cele trei elemente ale copilului și pseudoelementele lor
Fiecare element de coloană are un pseudo-element corespunzător, care acționează ca fundalImportant:Coloanele dvs. ar trebui să se afle în interiorul unui pachet parental (.împacheta în acest caz) setat la poziție: relativă; pentru ca poziționarea absolută să funcționeze. Acest lucru ar trebui să clar după coloanele plutitoare pentru a se asigura că primește o valoare înălțime pentru ca fundalul să se întindă.
Există câteva abordări excelente care sugerează alte modalități de a rezolva această problemă. Dacă nu aveți nevoie de avantajele specifice ale acestei abordări, puteți prefera una dintre următoarele soluții.
Dacă intenționați să utilizați numai culori plane în mediile dvs., atunci o soluție foarte inteligentă este să aplicați un gradient CSS orizontal, creând benzi de culoare care să se alinieze cu coloanele dvs. Verificați cum, datorită lui Chris Coyier.
Cu toate acestea, dacă designul dvs. are nevoie de imagini, frontiere, efecte CSS3 și așa mai departe aplicate în fundalurile dvs., atunci tehnica noastră "background holder" div poate fi o potrivire mai bună, de ex..
O altă soluție foarte bună este utilizarea pseudo-selectorilor :inainte de și :după pe coloana parentală a coloanelor pentru a crea până la trei coloane cu fundaluri de înălțime egale. Puteți citi despre această tehnică, explicată de Nicolas Gallagher.
Pe de altă parte, dacă aveți nevoie de mai mult de trei coloane, vă recomandăm să utilizați tehnica noastră "deținător de fundal", deoarece puteți avea cât mai multe coloane pe care le doriți. de exemplu.
Odată ce vedem suportul extins al browserului pentru flexbox, ar trebui să devii destul de drept înainte să faci lucruri de genul asta fără a trebui să te bazezi pe pseudo-elemente.
Cu toate acestea, între timp și până acum, aceasta este o modalitate foarte bună de a face treaba. Vă permite să păstrați lățimea flexibilă pentru planurile receptive, să folosiți cât mai multe coloane și să aplicați orice tip de stil de fundal.
