HTML Layout - sticky: header, footer i sidebar

Pozdrav,

pokušavam napraviti layout koji će imati sticky header, footer i sidebar.

Zahtjev koji želim postići je da sve bude zadano na način, tako da:
-ako se promjeni visina headera ili footera, da se visina contenta automatski prilagodi
-ako se promjeni širina sidebara, da se širina contenta automatski podesi.

Pod automatski ne mislim da se taj automatizam ugrađuje u javascript, koji bi hvatao promjene i prilagođavao layout …nego da je layout opisan samo sa CSS-om i da se elementi iz tih pravila automatski prilagođavaju jedni drugima.

Dosta sam se mučio sa jednom “sitnicom”, da bi na kraju skužio da imam zapravo funkcionalan layout, ali funkcionalan samo za Chrome.

Tako da ovo: https://codepen.io/anon/pen/bPJrQy …radi u Chromeu, ali ne radi u Mozilli.

Ima li netko ideju u čemu je problem?

I generalno, ima li netko prijedlog za isti/sličan template, koji ispunjava gornji zahtjev?

Hvala.

Kako ce se mijenjati visina/sirina headera/footera/sidebara?

CSS-om ili ovisno o sadrzaju?

Treba podržati i jedno i drugo.
Kao što trenutno podržava ok na Chromeu

Imaš gore u zaglavlju HTML varijable sa kojima možeš definirati koliko će se linija ispisati u headeru, contentu ili footeru…pa možeš testirati.

Isto tako možeš promjeniti visinu i putem style pravila…

Updejtao sam, jer vidim da nisam prvi puta sve stavio što sam imao: https://codepen.io/anon/pen/bPJrQy

Uglavnom, sve je isto osim što sada ima i scrollbar u FF-u.
Ali problem je što se iz nekog razloga istisne footer iz ekrana…

Kada se stavi

.sticky_sidebar_layout_content.height = 50%

…i da se ispisuje samo 15 linija contenta…onda se prikazuje sve ispravno.

(Naravno, osim što content ispuni samo 50% umjesto 100% svog prostora)

No problem nastaje kada se podigne broj linija sa 15 na 30…itd. Onda se iz nekog nepoznatog razloga footer istisne iz layouta mada content i dalje zadržava svojih 50% po visini…

Tu ga neki vrag zeza…

Nakon dosta borbe, poprilično sam zadovoljan ishodom :slight_smile:

Doduše, iskopao sam neko rješenje koje je bilo djelomično ono što sam gore tražio, ali je radilo. Doduše nisam kužio zašto radi, dok je moje prethodno išlo na istu foru, a pucalo.

I onda sam još to rješenje bez problema nadoštukao sa svim svojim djelovima…i onda sam se još razbacao sa par noviteta koji bi mogli biti korisni. Tako da layout sada izgleda ovako:

https://codepen.io/anon/pen/orOQRx :smiley: :smiley:

Znači osim glavnog headera i footera, postoji još mogućnost da se ubace i headeri i footeri posebno za sidebar dio…i posebno za content dio.

Pri tome, cijeli layout je potpuno DRY free…koja god veličina da se promjeni (bilo kroz css ili dodavanjem sadržaja) …ostatak će se samostalno pravilno prilagoditi.

I još k tome je modularan, koji god dio da se izbaci od spomenutih headera/footera …sve ostalo će ostati na svome mjestu.

A i lako se nadoštuka sa novim kolonama: https://codepen.io/anon/pen/ZdZVzZ

Njam. :smiley:

(ne)vezano za temu, često svi zaboravimo sve testati u više browsera! :slight_smile:

A da…sve ovisi o ozbiljnosti zadatka. Za neki prosjek mi je uvjet da radi na Chrome i FF …tek u nekoj kasnijoj fazi razmisljam sto je sa ostalim preglednicima, ako dodje do te faze :slight_smile:

1 Like

Čovjek baš razljuti kada napiše 5 klasa u nekom css-u i onda skonta da mora napisati i šestu samo npr. radi Chromea

Ne znam koliko su razvijeni alati sljedećeg tipa, ali rješenje ovog problema leži u preprocesoru css-a.

Isto kao što postoji preprocesor koji kompajlira scss u css, tako može postojati i preprocesor koji će kompajlirati napisani css u varijantu koja je kompatibilna sa vodećim browserima.

Taj preprocesor bi automatski mogao izbaciti i warning ako se koristi sintaksa koja se jednostavno ne moze prilagoditi za neki browser …tj. developer bi dobio izvještaj s kojim browserima je kompatibilan i sa kojima to nije postignuto. Isto kao što bi developer kroz konfiguraciju postavki tog toola mogao birati do kuda želi ići sa kompatibilnosti. Jer nema potrebe da se tera mak na konac i pokušava biti dobar sa IE8 naprimjer.

Ono što je tu najljepše…kada bi se pojavilo neko pucanje te kompajlirane sintakse na određenim browserima, problem bi se jedino trebao istjerati na enginu tog preprocesora, dok bi source css code (ukoliko je ispravno pisan) mogao ostati kakav i je bio.
A to je target…da css bude normiran i da se greške ne popravljaju tako da se treba popravljat ispravan css/scss (kao što to činimo nažalost danas)

I time bi source css code izgledao puno lijepše …jer u startu nebi morali pisati duplu sintaksu da pokrijemo različite browsere.

To će tako sigurno biti, a poprilično sam uvjeren da već danas ima alata koji idu u tom smjeru…iako još to nisam istraživao.
Ali nije mi se još desilo da vidim jasno nešto, što već ne postoji. Barem u svojim začecima. :slight_smile: :slight_smile:

Radi njega nikad, prije radi svih ostalih.

Već postoji dodaci za gulp, webpack, postcss kao što je Autoprefixer ili ie flex bugs I slični.

Malo sam sredio, izbacio suvišni CSS …pa ostavljam link i ovdje:
https://codepen.io/anon/pen/VoyNOK

Za više kolona dovoljno je kopirati HTML dio za kolonu:
https://codepen.io/anon/pen/RXxmPg

Možda nekome bude korisno, ali generalno volim da bude sve na jednom mjestu. (Kada izgubim svoju lokalnu dokumentaciju, kopam po forumima i sakupljam djelove :smiley: )

Kad se skapiraš sa github-om i gist konceptom, pos’o će ti biti pjesma. :blush:

Samo preventivno, jer nisam još nikada izgubio. :wink:
Svejedno volim imati sve na dva mjesta, pogotovo tamo gdje je neka tema otvorena, volim da je na istom mjestu i završena.