I am using the following CSS code to position a footer at the bottom of each page on my site:
.footer
{
position:fixed;
bottom:1px;
width:100%;
}
What I want is for the footer to be at the bottom of the page or screen, whichever is largest (i.e. if I have a page with only a few lines of text, I need the footer at the base of the screen. This I have done by changing the positioning to relative, but then on larger pages the footer is midway through the page. However, with a fixed position, the content often over-laps the footer and it looks messy.
How can I align the footer so that
a) It always appears beneath any content on the page
and
b) is always at least at the bottom of the screen
Probably simple for anyone with CSS experience to answer I know. I've experiements with fixed, absolute, static and relative positioning, but nothing gives the behaviour i want.
Thanks
.footer
{
position:fixed;
bottom:1px;
width:100%;
}
What I want is for the footer to be at the bottom of the page or screen, whichever is largest (i.e. if I have a page with only a few lines of text, I need the footer at the base of the screen. This I have done by changing the positioning to relative, but then on larger pages the footer is midway through the page. However, with a fixed position, the content often over-laps the footer and it looks messy.
How can I align the footer so that
a) It always appears beneath any content on the page
and
b) is always at least at the bottom of the screen
Probably simple for anyone with CSS experience to answer I know. I've experiements with fixed, absolute, static and relative positioning, but nothing gives the behaviour i want.
Thanks