Skip to the main content
[] 1. veljače 2011.

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.

Header and footer static

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:

Demo te download (ZIP).

Ovo radi u pet najčešćih preglednika.

Internet Explorer Firefox Safari Chrome Opera


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?