CSS: Fixed Header and Footer Heights

  • Thread starter Thread starter ~J~
  • Start date Start date

~J~

~J~

Soldato
Joined
20 Oct 2003
Posts
7,558
Location
London
Does anyone have any CSS style(s) that allow me to have the following:

A fixed height and 100% width header
A fixed height and 100% width footer
A variable 'middle/content', 100% width

Can't seem to get the footers bottom to be constantly fixed/anchored at the bottom of the browser.

TIA
 
I find CSS heights very buggy and different per browser.

I can't say it will be easy without some horrible hacks.
 
Cheers,

Honestly didn't think it would be 'that' hard, I'm trying to make my site more widescreen by having a top and bottom border, but don't want the bottom border too big depending on the vertical resolution.

But thanks for link, something to certainly look at.
 
Hmm, not sure what you mean but I did this for one of my sites: http://www.idoweddingfilms.co.uk (click here for a page that requires scrolling).

I'm not sure if you want the footer to be fixed at the bottom like that (you do say "to be constantly fixed/anchored at the bottom of the browser") or just always underneath the content. If the former then feel free to steal my code - it wasn't hard at all :eek:.
 
Last edited:
What I think he wants is a fixed height in pixels for header and footer. and an expanding middle.

But here is the hard bit, he wants the footer to always sit at the bottom of the browser window. To do that he needs the middle bit to auto expand the browser height minus the footer height.

like eg:
----------------------------------
Header: 100px
----------------------------------
Middle: auto (filling up space)
----------------------------------
Footer: 50px
----------------------------------
 
That's exactly what I'm after djkav, and that works perfect Inquisitor!!! :)

Thanks!!
 
Back
Top Bottom