Coloane de înălțime egală pentru un design receptiv. Coloane de aceeași înălțime

Traducere: Vlad Merzhevich

Unul dintre puținele lucruri care nu este ușor de făcut cu CSS este ca coloanele să aibă aceeași înălțime. Există abordări diferite, fiecare dintre ele are argumentele sale pro și contra, aici vreau să arăt patru metode.

Să ne gândim la ce înțelegem prin coloane de aceeași înălțime. De obicei, nu dorim ca conținutul din fiecare coloană să aibă aceeași înălțime. Dacă ar fi așa, atunci nu ar fi nicio problemă, deoarece înălțimea coloanelor ar fi în mod natural aceeași. Ceea ce înțelegem cu adevărat prin coloane de înălțime egală sunt coloane care arată la fel fără conținutul din interior.

Putem realiza acest lucru adăugând un fundal în spatele difuzoarelor, astfel încât acestea să pară a fi de înălțime egală. Ca rezultat, obținem o înălțime identică fictivă.

Nu am vrut niciodată să folosesc difuzoare false. Nu pentru că ar fi o metodă proastă, ci pentru că am ceva - nu utilizați niciodată o imagine ca umplutură de culoare solidă. Din acest motiv, am dezvoltat propria mea metodă de obținere a coloanelor de aceeași înălțime, pe care în lipsa unui termen mai bun le voi numi pseudo-coloane.

Funcționează similar cu metoda coloanei false, care implică adăugarea unui fundal la container. Aceasta nu este o abordare generală a coloanelor de aceeași înălțime, deci are un domeniu de aplicare limitat, dar dacă întâlniți un astfel de caz, totul funcționează ușor și simplu.

HTML

Folosim același cod HTML ca și în metoda coloanei fictive de mai sus.

CSS

CSS-ul este din nou destul de simplu. Pentru varietate, am ales un aspect fluid, dar puteți configura cu ușurință totul pentru o lățime fixă.

#container ( fundal: #555; overflow: ascuns ) #conținut ( float:left; width:75%; background:#eee; ) #sidebar (float:left; width:25%; background:#555; )

Pe lângă utilizarea % în loc de px, observați că am setat culoarea de fundal pentru #content și #sidebar . Tot ce trebuie să faceți este să o setați pentru orice coloană care va fi mai mare, dar aici am setat în mod special culoarea pentru două coloane.

Principala schimbare în comparație cu coloanele fictive este că, în loc de o imagine de fundal, setăm culoarea de fundal. Practic, aceasta este aceeași cu arătarea culorii de fundal a unui container printr-o coloană scurtă.

Limitarea este următoarea - trebuie să știm dinainte care coloană va fi mai scurtă și în mod ideal această coloană ar trebui să fie așa pe toate paginile site-ului. Aceasta pare o limitare destul de serioasă, dar în practică, constat că una dintre cele două coloane este de obicei mai scurtă pe majoritatea, dacă nu pe toate, paginile. În paginile în care acesta nu este cazul, remedierea este la fel de simplă ca și adăugarea mai mult sau mai puțin conținut.

pro

• Ușor de configurat.
• Usor de intretinut.

Minusuri

• Este mai dificil de implementat pentru trei sau mai multe coloane.
• Trebuie să știți în prealabil înălțimea coloanelor.
• Nu funcționează când coloanele sunt mai înalte sau mai scurte pe pagini diferite.

Această metodă este departe de a fi perfectă, dar vei fi surprins cât de des poate fi folosită în practică.

Am dat peste această metodă nu de mult în Smashing Magazine într-un articol al lui Thierry Coblentz, deși mai târziu am găsit un articol al lui Alan Pearce pe A List Apart scris în urmă cu câțiva ani despre aceeași metodă. Bordurile și umplutura negativă sunt folosite pentru a crea aspectul unor coloane de înălțime egală.

HTML

Nu este nimic nou în HTML în comparație cu ceea ce am văzut mai sus. În articolul său, Thierry folosește un corp ca container, dar voi rămâne să folosesc un container div așa cum fac de obicei.

CSS

CSS este locul unde începe distracția. Containerul este folosit pur și simplu pentru a menține lățimea și a centra aspectul. Lucruri interesante se întâmplă cu #conținut și #bara laterală.

#container ( lățime: 960px; margine: 0 automat; ) #conținut ( float:left; width:700px; margine-stânga: 260px solid #555; ) #sidebar (float: stânga; lățime: 260px; margine-dreapta: - 260px; poziție: relativă; )

Toate culorile de fundal din această metodă sunt setate la coloana #content. Setăm fundalul ca de obicei, apoi adăugăm un chenar din stânga egal cu lățimea barei laterale. Culoarea chenarului se potrivește cu fundalul barei laterale.

Dacă ne oprim aici, veți vedea coloanele afișate, dar chenarul nostru din stânga împinge bara laterală și trebuie să o aducem înapoi.

Mai întâi, să dăm barei laterale o margine dreaptă negativă egală cu lățimea acesteia (sau lățimea marginii din stânga a conținutului, acestea sunt aceleași). Aceasta va readuce bara laterală acolo unde o dorim, dar încă nu este vizibilă. Problema este ordinea de stivuire a celor două div. #conținutul este deasupra #sidebar , așa că trebuie să mutăm #sidebar în față. Să facem asta adăugând poziție: față de bara laterală, astfel încât conținutul său să fie acum vizibil.

pro

• Configurare ușoară odată ce înțelegeți cum funcționează.
• Usor de intretinut.

Minusuri

• Lățimea barei laterale trebuie să fie fixă, deoarece border-width înțelege doar valorile absolute.
• Marjele negative pot provoca o eroare în unele versiuni mai vechi de IE.

Recomand să citiți ambele articole de mai sus, deoarece oferă informații mai detaliate decât le ofer aici. Ambele articole conțin cod pentru utilizarea acestei metode cu o a treia coloană, iar articolul lui Thierry vorbește despre crearea granițelor între coloane.

Ultima metodă a fost creată de Matthew James Taylor. Dintre toate metodele prezentate aici, de data aceasta va funcționa într-o mare varietate de cazuri de utilizare.

Am lăsat-o până la final pentru că metoda este puțin complicată și poate fi necesar să o citiți de câteva ori pentru a înțelege cum funcționează.

HTML

HTML-ul este similar cu ceea ce am văzut mai sus, deși veți observa un container div suplimentar.

Ca și în cazul celorlalte metode, vom folosi aceste containere pentru a seta culorile de fundal să apară ca și cum ar aparține coloanelor noastre.

CSS

În CSS se întâmplă ceva mai mult decât am văzut până acum. #sidebar și #content primesc o valoare flotantă a stângă și este setată o lățime, totul dincolo de acesta este nou.

Cheia acestei metode este ideea că un container plutitor are întotdeauna aceeași înălțime ca și conținutul său. Prin plasarea coloanelor noastre în interiorul containerelor plutitoare, ne asigurăm că containerele vor fi egale cu înălțimea celei mai lungi coloane.

#container-exterior ( float:left; overflow: ascuns; fundal: #eee; ) #container-inner ( float:left; fundal: #555; poziție: relativ; dreapta:75%; ) #sidebar (float: stânga; lățime: 25%; poziție: relativă; stânga: 75%; ) #conținut ( float: stânga; lățime: 75%; poziție: relativă; stânga: 75%; )

Primul pas este să adăugați float la coloane și containere. Eu folosesc valoarea din stânga, dar direcția nu este importantă în acest caz. Utilizați direcția necesară pentru aspectul dvs. Următorul pas este să setați fundalurile pentru cele două div. Am stabilit un fundal pentru #container-inner pentru a obține ceea ce vreau pentru bara laterală și un fundal pentru #container-outer pentru a obține ceea ce vreau pentru conținutul principal.

Dacă ne oprim aici, vom vedea doar fundalul pentru div-ul interior, deoarece este mai mare în ordinea de stivuire decât div-ul exterior.

Avem nevoie de puțină poziționare pentru a muta div-ul interior, astfel încât să arate doar unde vrem să apară bara laterală. Acest lucru va permite ca fundalul div-ului exterior să apară unde vrem să arătăm coloana de conținut.

#container-inner ( poziție: relativ; dreapta: 75%; )

Poziționați coloana interioară și setați valoarea corectă la 75%, este aceeași cu lățimea coloanei de conținut.

Fundalul este încă acolo, dar conținutul ambelor coloane este, de asemenea, deplasat cu 75% la stânga. Trebuie să le mutăm la locul lor.

#bara laterală ( poziție: relativ; stânga:75%; ) #conținut (poziția: relativ; stânga:75%; )

Folosim din nou poziționarea relativă și, deoarece conținutul ambelor coloane s-a mutat cu 75% la stânga, trebuie să-l mutăm înapoi cu 75% la dreapta. Să facem asta setând valoarea din stânga la 75%. Acum totul a revenit unde ar trebui să fie.

pro

• Funcționează indiferent de coloană mai înaltă sau mai mică.
• Functioneaza cu orice tip de layout (fix, cauciuc, elastic etc.).
• Puteți face câte coloane doriți.

Minusuri

• Puțin greu de înțeles la început.
• Sunt necesare div-uri suplimentare non-semantice.

În general, aceasta este cea mai fiabilă metodă și este garantat că funcționează în orice situație. Vă încurajez să vă jucați cu asta pentru o înțelegere reală și să citiți articolul lui Matei de mai multe ori.

Articolul lui Matthew arată un aspect în trei coloane și are, de asemenea, o demonstrație pentru patru și cinci coloane. Am decis să arăt un aspect cu două coloane în speranța că va face ideea mai ușor de înțeles.

Resurse aditionale

Acestea nu sunt în niciun caz singurele metode de a crea coloane de înălțime egală. Chris Coyer a împărtășit câteva alte tehnici în urmă cu ceva timp pe CSS Tricks pe care poate le preferați celor prezentate aici.

Există și multe alte metode care pot fi găsite cu puțină căutare. Cred că acest articol și Chris acoperă cele mai multe dintre metodele mai comune.

rezumat

Coloanele de înălțime egală sunt o caracteristică de proiectare de dorit, dar nu sunt întotdeauna ușor de realizat folosind aspecte CSS. Ideal ar fi să folosim ceva de genul înălțime: 100% și asta ar fi, dar deocamdată putem folosi oricare dintre metodele menționate mai sus.

sunt ușor de configurat, dar necesită o solicitare HTTP suplimentară pentru imagine, iar orice modificare a aspectului necesită o nouă imagine.

chiar mai simplu, dar au o utilizare limitată pentru cazurile în care înălțimea relativă a ambelor coloane este cunoscută și constantă de-a lungul paginilor.

sunt relativ ușor de utilizat, nu necesită anticiparea înălțimii coloanelor și se adaptează perfect la mai multe coloane. Ai nevoie doar de o coloană pentru a avea o lățime fixă.

funcționează în majoritatea cazurilor. Nu este nevoie să știți în prealabil despre înălțimile coloanelor și puteți lucra cu orice număr de coloane doriți. Această metodă este puțin mai complicată decât altele.

De-a lungul timpului mă aștept la o soluție standard mai simplă, dar deocamdată aceste patru metode ar trebui să fie suficiente pentru proiectul tău.

Cât de des proiectați un aspect cu coloane de înălțime egală? Ce metodă de creare a coloanei folosiți?

• Traducere

Anterior, când totul se făcea folosind tabele, era foarte ușor să creați coloane de aceeași înălțime. Este suficient să creezi un tabel, de exemplu, cu 3 coloane și toate vor avea automat aceeași înălțime. Dar în aspectul blocului, nu totul este atât de simplu.
În acest articol, vă voi arăta câteva modalități de a crea coloane de înălțime egală și cum aceste metode sunt compatibile cu browserele (inclusiv IE6). Toate aceste metode descriu crearea unui aspect cu 3 coloane.

Metoda 1: Utilizarea afișajului: proprietatea tabelului

Pentru a implementa aspectul, utilizați o listă (ul) sau un bloc div cu blocuri imbricate pentru un rând și fiecare dintre coloane. Border div primește afișarea valorii: table , iar fiecărui bloc de coloană imbricat i se oferă afișarea valorii: table-cell .
Să ne uităm la un exemplu cu o listă.
Cod HTML:

• .....O mulțime de conținut....


• .....O mulțime de conținut....


• .....O mulțime de conținut....

CSS:

.baza(
/*a face 100% lățime și un minim de 1000px lățime*/
latime: auto;
margine-stânga: 0px;
margine-dreapta: 0px;
lățime minimă: 1000px;
umplutură: 0px;
afisaj:tabel;
}
.rând de bază (
Afișaj: masă-rând;
}
.baseli(
afisare: tabel-celula;
latime: 33%;
}
.cell1 (
culoare de fundal: #f00;
}
.cell2 (
culoare de fundal: #0f0;
}
.cell3 (
culoare de fundal: #00f;
}

Avantaje:

Acesta este cel mai simplu și mai ușor mod de a crea coloane de înălțime egală, spre deosebire de alte metode.
Nu este posibil să se creeze o marjă externă (marja, cum ar fi spația dintre celule pentru tabele) care să fie egală pentru toate coloanele; cu toate acestea, poate fi înlocuită cu un chenar alb (sau culoarea de fundal a coloanei) cu lățimea adecvată pentru a simula marginea.

Defecte:

Această metodă nu funcționează în browserele IE7 și mai mici. Va trece mult timp (când IE7 devine noul IE6) până să putem folosi în siguranță această metodă.

Metoda 2: Utilizarea JavaScript

Această metodă se bazează pe utilizarea unui cod JS mic (JQuery) care „aranjează” înălțimea dorită pentru fiecare coloană pe baza înălțimii celei mai lungi.
Cod HTML:

… o mulțime de conținut…

…. O mulțime de conținut…

… o mulțime de conținut…

CSS:

.container(
Latime: 900px;
Marja-stânga: auto;
Marja-dreapta: auto;
}
.leftsidebar(
Plutește la stânga;
Latime: 33%;
}
.conţinut(
Plutește la stânga;
Latime: 33%;
}
.bara din dreapta(
Plutește la stânga;
Latime: 33%;
}

JavaScript (jQuery):

funcția setEqualHeight(coloane)
{
var cea mai înaltă coloană = 0;
columns.each(
funcţie()
{
currentHeight = $(acest).height();
if(currentHeight > cea mai înaltă coloană)
{
cea mai înaltă coloană = currentHeight;
}
}
);
coloane.înălțime(cea mai înaltă coloană);
}
$(document).ready(funcție() (
setEqualHeight($(".container > div"));
});

Puteți pune codul JS într-un fișier separat și îl puteți apela direct în codul HTML. În acest caz, inițializarea JQuery ar trebui să fie situată deasupra codului.
Codul pe care trebuie să-l schimbați este numele clasei de bloc care creează coloanele. În acest exemplu, aceasta este clasa containerului:

Puteți schimba numele clasei bloc de coloană sau chiar adăuga o clasă la fiecare bloc de coloană și le puteți utiliza separat pentru comoditate.

Avantaje:

Principalul avantaj al metodei este că funcționează în toate browserele și nu trebuie să vă deranjați cu codul CSS pentru a alinia înălțimea.

Defecte:

Dacă JavaScript este dezactivat, coloanele nu vor avea aceeași înălțime. Dar, de regulă, acesta este un caz foarte rar, deoarece... Cele mai multe site-uri web moderne necesită activarea JS.

Metoda 3: coloane artificiale

Această metodă a fost una dintre primele care a implementat coloane de aceeași înălțime. Esența sa este că blocului de încadrare i se atribuie un fundal care imită coloanele (vezi figura de mai jos). Ele sunt pur și simplu suprapuse pe acest fundal. Efectul de înălțime egală este creat de un fundal care se repetă.

Cod HTML:

CSS:

.container(
imagine de fundal: tile.png;
background-repeat: repetare-y;
latime: 900px;
margine-stânga: auto;
margine-dreapta: auto;

Bara din stânga (
plutește la stânga;
latime: 200px;
}

Continut (
plutește la stânga;
latime: 400px;
}

Dreapta(
plutește la stânga;
latime: 300px;
}

Mai clar (
clar: ambele;
}

Avantaje:

Implementare foarte simplă.

Defecte:

Această metodă poate fi utilizată numai pentru aspecte/coloane cu lățime fixă.

Metoda 4: Folosirea blocurilor separate cu fundal

Această metodă se bazează pe utilizarea div-urilor separate, fiecare dintre ele având propriul fundal și ia înălțimea elementului pe care îl conține.
Cod HTML:

... O mulțime de conținut...

... O mulțime de conținut...

... O mulțime de conținut...

CSS:

.dreapta spate(
latime: 100%;
plutește la stânga;
culoare de fundal: verde;
preaplin:ascuns;
poziție:relativă;
}
.contentback(
plutește la stânga;
culoare de fundal: albastru;
latime: 100%;
poziție:relativă;
dreapta: 300px; /* lățimea barei laterale din dreapta */
}
.lasat in urma(
latime: 100%;
poziție:relativă;
dreapta: 400px; /* latimea zonei de continut */
plutește la stânga;
culoare de fundal: #f00;
}

Container (
latime: 900px;
margine-stânga: auto;
margine-dreapta:auto;
}

Bara din stânga (
plutește la stânga;
latime: 200px;
preaplin:ascuns;
poziție:relativă;
stânga: 700px;
}

Continut (
plutește la stânga;
latime: 400px;
preaplin:ascuns;
poziție:relativă;
stânga: 700px;
}

Bara din dreapta (
plutește la stânga;
preaplin:ascuns;
latime: 300px;
culoare de fundal:#333;
poziție:relativă;
stânga: 700px;
}

Nu pare ușor, nu-i așa? Principalul lucru este să înțelegeți 5 puncte principale:

1. .rightback, .contentback și .leftback conțin elementele .leftsidebar, .content și .rightsidebar, care la rândul lor conțin text.
2. Fiecare dintre blocurile imbricate este responsabil pentru culoarea/fondul coloanei. În acest exemplu
   .leftback se întâlnește cu .leftsidebar,
   .contentback – .conţinut
   și .rightback – .rightsidebar.
3. Cu excepția ultimului (responsabil pentru coloana din dreapta), fiecare dintre blocuri
   umplutura din dreapta este setată egală cu lățimea elementului adiacent la dreapta care conține fundalul. În acest exemplu, .contentback (responsabil pentru background.content) este deplasat la stânga cu 300 px (care este lățimea blocului.rightsidebar). (vezi poza de mai jos)
4. Coloanele .leftsidebar, .content și .rightsidebar sunt situate una în spatele celeilalte cu o anumită lățime.
5. Acestea oferă o marjă din stânga egală cu suma lățimii fiecărei coloane, cu excepția celei din dreapta. Acestea. acestea sunt egale=width.rightsidebar(300px) și.content(400px) = 700px.(B+G)

Figura de mai jos arată cum sunt aranjate blocurile .rightback, .contentback și .leftback. Cel din stânga este .rgthback, cel din extrema dreapta este .leftback.

Linia punctată arată zona vizibilă a coloanelor (blocul din spate din dreapta este tăiat cu overflow: ascuns).
În imaginea de mai jos, liniile negre situate sub cele roșii reprezintă conținutul elementelor