CSS problem: zaglavlje (header) i podnožje (footer) su uvijek iste (fixed) visine dok se sadržaj koji se nalazi u središnjem dijelu stranice razvlači i skuplja i dobiva traku za pomicanje (scrollbar) po potrebi.
Stvar se može nabiti u par linija čistokrvnog CSSa koji je toliko jednostavan i očigledan da ćete se pitati zašto vam ovo rješenje nije odmah palo na pamet.
• • • • •
Dakle:
- imamo 3 DIV-a, svi su apsolutno pozicionirani
- gornji i donji imaju fiksnu visinu; prekoračenje(overflow) maknuto
- centralni počinje na "dnu" gornjeg i završava na "vrhu" donjeg; preljev na auto
- nema više, to je cijela mudrost
CSS:
#header { position: absolute; top: 0; left: 0; overflow: none; width: 100%; height: 100px }
#footer { position: absolute; bottom: 0; left: 0; overflow: none; width: 100%; height: 100px; }
#content { position: absolute; top: 100px; bottom: 100px; width: 100%; overflow: auto }
HTML:
<div id="header"></div>
<div id="footer"></div>
<div id="content"></div>
Et voila!
Provjeri te posrči:
Ovo radi u pet najčešćih preglednika.
Vezani postovi:
- CSS: CSS: Footer nabijen na dno prozora
- CSS: Prozirnost u svim preglednicima
- CSS: Kako centrirati sadržaj na stranici?
- CSS: Zaobljeni rubovi 2
- CSS: Targetiranje preglednika
- CSS: Zamjena teksta slikom
- Utopija za web majstore
- Zaobljeni rubovi
PS. Nedostaje li vam Internet Explorer 6?
Programiranje
Komentara: 7
Tweet
RSS feed