Stupovi jednake visine za responzivni dizajn. Stupovi iste visine

Prijevod: Vlad Merzhevich

Jedna od rijetkih stvari koje nije lako učiniti s CSS-om je stvaranje stupaca iste visine. Postoje različiti pristupi, svaki od njih ima svoje prednosti i nedostatke, ovdje želim pokazati četiri metode.

Razmislimo o tome što podrazumijevamo pod stupovima jednake visine. Općenito, ne želimo da sadržaj unutar svakog stupca bude iste visine. Da je to slučaj, onda nema problema, jer bi visina stupova prirodno bila ista. Zapravo, pod stupcima iste visine mislimo na stupce koji izgledaju isto bez sadržaja unutar.

To možemo postići dodavanjem pozadine iza stupaca tako da izgledaju jednake visine. Kao rezultat, dobivamo fiktivnu identičnu visinu.

Nikada nisam želio koristiti lažne stupce. Ne zato što je to loša metoda, već zato što ne želim nikada koristiti sliku za ispunu u punoj boji. Zbog toga sam razvio vlastitu metodu za dobivanje stupaca jednake visine, koje ću nazvati pseudo-stupci zbog nedostatka boljeg izraza.

Radi slično metodi lažnih stupaca, koja uključuje dodavanje pozadine u spremnik. To nije opći pristup za stupove jednake visine, tako da ima ograničen opseg, ali ako naiđete na ovaj slučaj, sve je vrlo jednostavno i jednostavno.

HTML

Koristimo isti HTML kao u gornjoj metodi lažnih stupaca.

css

CSS je opet prilično jednostavan. Radi raznolikosti odabrao sam fluidan raspored, ali lako možete sve postaviti i na fiksnu širinu.

#container (pozadina: #555; overflow: hidden ) #content (float:left; width:75%; background:#eee; ) #sidebar (float:left; width:25%; background:#555; )

Uz korištenje % umjesto px, primijetite da sam postavio boju pozadine za #content i #sidebar . Samo ga morate postaviti za bilo koji stupac koji je viši, ali ovdje sam posebno postavio boju za dva stupca.

Glavna promjena u odnosu na lažne stupce je da umjesto pozadinske slike postavljamo boju pozadine. U principu, ovo je isto kao i prikazivanje boje pozadine spremnika kroz kratki stupac.

Ograničenje je sljedeće - moramo unaprijed znati koji će stupac biti kraći, a idealno bi bilo da ova kolona bude takva na svim stranicama stranice. Zvuči kao prilično ozbiljno ograničenje, ali u praksi smatram da je jedan od dva stupca obično kraći na većini, ako ne i na svim stranicama. Na stranicama na kojima to nije slučaj, popravak je jednostavan kao dodavanje više ili manje sadržaja.

pros

• Samo namjestiti.
• Jednostavan za posluživanje.

Minusi

• Teže je implementirati za tri ili više stupaca.
• Morate unaprijed znati visinu stupova.
• Ne radi kada su stupci viši ili kraći na različitim stranicama.

Ova metoda je daleko od savršene, ali ćete se iznenaditi koliko se često može koristiti u praksi.

Na ovu metodu sam naišao ne tako davno u Smashing Magazinu u članku Thierryja Koblenza, iako sam kasnije pronašao članak Alana Piercea na A List Apart, napisan prije nekoliko godina o istoj metodi. Obrube i negativni padding koriste se da daju izgled stupaca jednake visine.

HTML

U HTML-u nema ništa novo u usporedbi s onim što smo vidjeli gore. U svom članku Thierry koristi tijelo kao spremnik, ali ja ću se držati korištenja div spremnika kao što to obično radim.

css

Zabava počinje u CSS-u. Spremnik se koristi samo za fiksiranje širine i centriranje izgleda. Zanimljive stvari se događaju s #content i #sidebar .

#container ( width:960px; margin: 0 auto; ) #content (float:left; width:700px; border-left: 260px solid #555; ) #sidebar (float: left; width:260px; margin-right: - 260px; položaj: relativan; )

Sve boje pozadine u ovoj metodi postavljene su za stupac #content. Postavljamo pozadinu kao i obično, a zatim dodajemo lijevi rub jednak širini bočne trake. Boja obruba odgovara pozadini bočne trake.

Ako ovdje stanemo, vidjet ćete prikazane stupce, međutim naša lijeva granica odmiče bočnu traku i moramo je vratiti.

Prvo, dajmo bočnoj traci negativnu desnu marginu jednaku njezinoj širini (ili širini lijevog ruba sadržaja, iste su). Ovo će vratiti bočnu traku tamo gdje želimo da bude, ali još uvijek nije vidljiva. Problem je redoslijed slaganja dva diva. #content se nalazi na vrhu #sidebara , tako da moramo pomaknuti #sidebar naprijed. To radimo dodavanjem položaja: u odnosu na bočnu traku i sada je vidljiv njezin sadržaj.

pros

• Jednostavno postavljanje kada shvatite kako funkcionira.
• Jednostavan za posluživanje.

Minusi

• Širina bočne trake treba biti fiksna jer granica širine prihvaća samo apsolutne vrijednosti.
• Negativne margine mogu uzrokovati grešku u nekim starijim verzijama IE-a.

Preporučam da pročitate oba članka na koja sam gore povezao jer nude detaljnije informacije nego što ih imam ovdje. Oba članka sadrže kod za korištenje ove metode s trećim stupcem, dok Thierryjev članak govori o stvaranju granica između stupaca.

Posljednju metodu kreirao je Matthew James Taylor. Od svih ovdje predstavljenih metoda, ovaj put će raditi u raznim slučajevima korištenja.

Ostavio sam je za kraj jer je metoda malo složena i možda ćete je morati pročitati nekoliko puta da shvatite kako funkcionira.

HTML

HTML je sličan onome što smo vidjeli gore, iako ćete primijetiti dodatni div spremnik.

Kao i kod drugih metoda, koristit ćemo ove spremnike za postavljanje boja pozadine tako da izgledaju kao da pripadaju našim stupcima.

css

U CSS-u se događa više nego što smo do sada vidjeli. #sidebar i #content plutaju ulijevo i širina je postavljena, sve ostalo osim toga je novo.

Ključ ove metode je ideja da je plutajući kontejner uvijek iste visine kao i njegov sadržaj. Postavljanjem naših stupova unutar plutajućih kontejnera osiguravamo da su spremnici jednaki visini najduljeg stupca.

#container-outer ( float:left; overflow: hidden; background: #eee; ) #container-inner (float:left; background: #555; pozicija: relativna; desno:75%; ) #sidebar (float: left; širina: 25%; položaj: relativan; lijevo: 75%; ) #sadržaj ( float: lijevo; širina: 75%; položaj: relativan; lijevo: 75%; )

Prvi korak je dodavanje plovka u stupce i spremnike. Koristim lijevu vrijednost, ali smjer u ovom slučaju nije bitan. Koristite smjer koji vam je potreban za svoj izgled. Sljedeći korak je postavljanje pozadine za dva diva spremnika. Postavio sam pozadinu za #container-inner da dobijem ono što želim za bočnu traku i pozadinu za #container-outer da dobijem ono što želim za glavni sadržaj.

Ako ovdje stanemo, vidjet ćemo samo pozadinu za ugniježđeni div, budući da je viši po redu slaganja od vanjskog div.

Trebamo malo pozicioniranja da pomaknemo unutarnji div tako da pokazuje samo gdje želimo da se pojavi bočna traka. To će omogućiti da se pozadina vanjskog diva prikaže kroz mjesto na kojem želimo da se prikaže stupac sadržaja.

#container-inner (položaj: relativan; desno: 75%; )

Postavite unutarnji stupac i postavite pravu vrijednost na 75%, što je isto kao i širina stupca sadržaja.

Pozadine su još uvijek tu, ali sadržaj oba stupca također je pomaknut 75% ulijevo. Moramo ih pomaknuti na mjesto.

#bočna traka ( pozicija: relativna; lijevo:75%; ) #sadržaj (položaj: relativna; lijevo:75%; )

Ponovno primjenjujemo relativno pozicioniranje i budući da se sadržaj oba stupca pomaknuo 75% ulijevo, moramo to pomaknuti za 75% udesno. Učinimo to tako da lijevu vrijednost postavimo na 75%. Sada se sve vratilo tamo gdje treba biti.

pros

• Radi bez obzira koji je stupac viši ili kraći.
• Radi s bilo kojom vrstom rasporeda (fiksni, fluidni, elastični itd.).
• Možete napraviti onoliko stupaca koliko želite.

Minusi

• U početku je malo teško razumjeti.
• Potrebni su dodatni nesemantički divovi.

Općenito, ovo je najpouzdanija metoda i zajamčeno će raditi u svakoj situaciji. Potičem vas da se igrate s njim za pravo razumijevanje i pročitajte Matejev članak nekoliko puta.

Matthewov članak dolazi s izgledom od tri stupca, a on također ima demo za četiri i pet stupaca. Odlučio sam prikazati izgled u dva stupca u nadi da će to olakšati razumijevanje ideje.

Dodatna sredstva

Ovo nipošto nisu jedine metode za stvaranje stupaca jednake visine. Chris Coyer je prije nekog vremena podijelio nekoliko drugih tehnika na CSS trikovima koje bi vam mogle biti draže od ovdje predstavljenih.

Postoje i mnoge druge metode koje se mogu pronaći uz malo traženja. Mislim da ovaj i Chrisov članak pokrivaju većinu uobičajenih metoda.

Sažetak

Stupovi jednake visine poželjna su značajka dizajna, ali ih nije uvijek lako postići s CSS rasporedima. U idealnom slučaju koristili bismo nešto poput visine: 100% i to je to, ali za sada možemo koristiti bilo koju od gore navedenih metoda.

lako se postavljaju, ali zahtijevaju dodatni HTTP zahtjev za sliku, a svaka promjena izgleda zahtijeva novu sliku.

još jednostavnije, ali ograničene upotrebe kada je relativna visina oba stupca poznata i konstantna na svim stranicama.

relativno su jednostavni za korištenje, ne zahtijevaju predviđanje visine stupaca i vrlo su prilagodljivi za više stupaca. Potreban je samo jedan stupac da bude fiksne širine.

radi u većini slučajeva. Ne morate unaprijed znati visinu stupova, a možete raditi s bilo kojim željenim brojem stupaca. Ova metoda je malo teža od ostalih.

S vremenom očekujem jednostavnije standardno rješenje, ali za sada bi ove četiri metode trebale biti dovoljne za vaš projekt.

Koliko često dizajnirate rasporede sa stupovima jednake visine? Koju metodu izrade stupaca koristite?

• Prijevod

Prije, kada se sve rasporedilo pomoću tablica, bilo je vrlo lako stvoriti stupce iste visine. Dovoljno je napraviti tablicu, na primjer, s 3 stupca, a svi će automatski imati istu visinu. Ali u blok rasporedu nije sve tako jednostavno.
U ovom članku provest ću vas kroz neke načine stvaranja stupaca jednake visine i kako su te metode kompatibilne s preglednicima (uključujući IE6). Sve ove metode opisuju stvaranje izgleda s 3 stupca.

Metoda 1: Korištenje svojstva display: table

Za implementaciju izgleda koristi se lista (ul) ili div blok s ugniježđenim blokovima za redak i svaki od stupaca. Pregradni div postavljen je na prikaz: tablica, a svaki ugniježđeni blok stupca postavljen je na prikaz: tablica-ćelija.
Razmotrimo primjer s popisom.
HTML kod:

• .....mnogo sadržaja....


• .....mnogo sadržaja....


• .....mnogo sadržaja....

CSS:

.baza(
/* neka bude 100% širine i minimalno 1000 px širine*/
širina: auto;
margin-left: 0px;
margin-desno: 0px;
minimalna širina: 1000px
padding: 0px
display:table;
}
.base-row(
Prikaz: red tablice
}
.baza li (
display:table-cell;
širina: 33%
}
.cell1(
boja pozadine: #f00;
}
.cell2(
boja pozadine: #0f0;
}
.cell3(
boja pozadine: #00f;
}

prednosti:

Ovo je najjednostavniji i najlakši način za stvaranje stupaca iste visine, za razliku od drugih metoda.
Margina, poput razmaka ćelija za tablice, ne može se stvoriti jednaka za sve stupce, međutim, može se zamijeniti bijelim obrubom (ili bojom pozadine stupca) s odgovarajućom širinom kako bi se oponašalo uvlačenje.

nedostaci:

Ova metoda ne radi u IE7 i starijim preglednicima. Proći će dosta vremena (kada IE7 postane novi IE6) prije nego što možemo sigurno koristiti ovu metodu.

Metoda 2: Korištenje JavaScripta

Ova metoda temelji se na korištenju malog JS koda (JQuery) koji "uređuje" željenu visinu za svaki stupac na temelju visine najdužeg od njih.
HTML kod:

… Puno sadržaja…

…. Puno sadržaja…

… Puno sadržaja…

CSS:

.kontejner (
Širina: 900px
margin-left: auto;
Margin-desno: auto;
}
.leftsidebar(
plutati: lijevo;
Širina: 33%;
}
.sadržaj(
plutati: lijevo;
Širina: 33%;
}
.desna bočna traka(
plutati: lijevo;
Širina: 33%;
}

JavaScript (jQuery):

funkcija setEqualHeight(stupci)
{
var najviši stupac = 0;
stupci.svaki(
funkcija()
{
trenutna visina = $(ovo).visina();
if(trenutna visina > najviši stupac)
{
najviši stupac = trenutna visina;
}
}
);
stupci.visina(najviši stupac);
}
$(dokument).spreman(funkcija() (
setEqualHeight($(".container > div"));
});

Možete staviti JS kod u zasebnu datoteku i pozvati ga izravno u HTML kodu. U ovom slučaju, inicijalizacija jQueryja trebala bi biti iznad koda.
Kôd koji trebate promijeniti je naziv klase bloka koji stvara stupce. U ovom primjeru, ovo je klasa kontejnera:

Možete promijeniti naziv klase bloka stupca ili čak dodati klasu svakom bloku stupca i koristiti ih zasebno radi praktičnosti.

prednosti:

Glavna prednost ove metode je što radi u svim preglednicima i ne morate se mučiti s CSS kodom za poravnanje visine.

nedostaci:

Ako je JavaScript onemogućen, u skladu s tim, stupci neće biti jednake visine. Ali, u pravilu, ovo je vrlo rijedak slučaj, jer. većina modernih web stranica zahtijeva da JS bude omogućen.

Metoda 3: umjetni stupovi

Ova metoda je bila jedna od prvih koja je implementirala stupove jednake visine. Njegova je bit da se bloku uokvirivanja dodjeljuje pozadina koja oponaša stupove (vidi sliku ispod). Oni su jednostavno postavljeni na ovu pozadinu. Efekt jednake visine stvara se pozadinom koja se ponavlja.

HTML kod:

CSS:

.kontejner (
pozadinska slika: tile.png;
background-repeat: repeat-y;
širina: 900px
margin-left: auto;
margin-desno: auto;

Lijeva bočna traka (
plutati: lijevo;
širina: 200px
}

Sadržaj(
plutati: lijevo;
širina: 400px
}

desno (
float:lijevo;
širina: 300px
}

jasnije (
jasno: oboje;
}

prednosti:

Vrlo jednostavna implementacija.

nedostaci:

Ova se metoda može koristiti samo za rasporede/stupce fiksne širine.

Metoda 4: Korištenje zasebnih blokova s ​​pozadinom

Ova metoda se oslanja na zasebne divove, svaki s različitom pozadinom i uzimajući visinu elementa koji zatvara.
HTML kod:

…mnogo sadržaja…

…mnogo sadržaja…

…mnogo sadržaja…

CSS:

.odmah nazad(
širina: 100%
float:lijevo;
boja pozadine: zelena;
overflow:hidden;
položaj:relativan;
}
.contentback(
float:lijevo;
boja pozadine:plava;
širina: 100%
položaj:relativan;
desno: 300px; /* širina desne bočne trake */
}
.lijevo iza(
širina: 100%
položaj:relativan;
desno: 400px; /* širina područja sadržaja */
float:lijevo;
boja pozadine: #f00;
}

Kontejner (
širina: 900px
margin-left: auto;
margin-right:auto;
}

Lijeva bočna traka (
float:lijevo;
širina: 200px
overflow:hidden;
položaj:relativan;
lijevo: 700px;
}

Sadržaj(
float:lijevo;
širina: 400px
overflow:hidden;
položaj:relativan;
lijevo: 700px;
}

desna bočna traka (
float:lijevo;
overflow:hidden;
širina: 300px
boja pozadine:#333;
položaj:relativan;
lijevo: 700px;
}

Ne izgleda lako, zar ne? Glavna stvar je razumjeti 5 glavnih točaka:

1. .rightback, .contentback i .leftback sadrže elemente .leftsidebar, .content i .rightsidebar, koji zauzvrat sadrže tekst.
2. Svaki od ugniježđenih blokova odgovoran je za boju/pozadinu stupca. U ovom primjeru
   .leftback odgovara .leftsidebar,
   .povratak sadržaja - .sadržaj
   i .desni stražnji - .desna bočna traka.
3. Osim posljednjeg (odgovornog za krajnji desni stupac), svaki od blokova
   desni padding je postavljen na širinu susjednog desnog elementa koji sadrži pozadinu. U ovom primjeru, .contentback (odgovoran za pozadinu .content) pomaknut je ulijevo za 300px (što je širina bloka .rightsidebar). (vidi sliku ispod)
4. Stupci .leftsidebar, .content i .rightsidebar naslagani su jedan do drugog s određenom širinom.
5. Daju lijevu uvlaku jednaku zbroju širina svakog stupca, osim krajnjeg desnog. Oni. jednaki su=width.rightsidebar(300px) i .content(400px) = 700px.(b+g)

Slika ispod pokazuje kako se nalaze blokovi .rightback, .contentback i .leftback. Krajnji lijevi je .rightback, krajnji desni je .liftback.

Isprekidana linija prikazuje vidljivo područje stupaca (desni stražnji okvir je izrezan s preljevom: skriven).
Na slici ispod, crne linije ispod crvene linije su sadržaj elemenata.