Footer height based on screen size
- by o-logn
Hi everyone,
I would like to create a footer which is relative to the content (so not fixed), but fills the rest of the screen. So for example, on my larger monitor, the footer would start in the same place, but fill up 100px (for example). On a smaller monitor, it only needs to fill up 75px. I tried using 100%, but it causes the page to be really big and the user can scroll down and fill the entire screen with the footer. Is there a way to get it to be a bit more reasonable size, so that it just about fills the bottom of the screen?
My current code is this:
.footer
{
position:relative; //can't be fixed as content might overlap if extended
height:100%;
width:100%; //fill the entire screen horizontally
bottom:0px;
margin-top:345px; //used to make sure content doesn't overlap
}
Thanks for any ideas
