Div to fill 100% of remaining height

[edoscope]

Hi guys,

I am having a problem getting my footer div tag to fill the remaining 100% of the page height. I have content above this div that will be an unknown height. i would like the footer to aso be a minimum height of 20px (if the content causes scroll bars).

here is the link to my code, note that most formatting is done via CSS

I have gotten it to have a height of 100% + whatever size is above it, causing scroll bars. this is not what i want. Also if it makes a difference, I really want there to be a 20 px margin around the page, which does not seem to be working either.

thanks for the help and please ask any questions if im confusing what i need.

[shaya4207]

Well there are a couple of issues in your code,

1. Having the 'body' 100% wide, and still adding a margin/padding, is not gonna work logically, because you're adding 20px beside the 100%
2. If you're giving the footer a 100% height, you're saying that anything else would add beyond the page size

You should probably start off by making the body only about 90% wide (just an example), and that will automatically give a padding, regarding your footer, it'll always be minimum 20px since the image you're repeating is 20px, and if you really want it to be exact IMHO the only way to do it would be with JavaScript, telling it to do some math, otherwise you can just say that the main content should always be 'xx%' and the footer should always be 'xx%' (remember not to make the content and footer be equal to 100%, because you still need space for the header too)...

[MidiMagic]

The page can not know the height of the viewport, if that is what you want. There is no way to find this out that works on all browsers.

The 100% refers to the height of the content, not the height of the screen.