CSS height percentage specification

[a b a s]

I'm trying to set out a screen-fitting application to my website, but I am having some problems, I know the ins and outs of CSS on the basics side, but I get a little confused when using percentages. I need a header (50px), then I need a box (height 100%) then a small box footer(20px), but this all needs to be on the screen without overflow, when I try this with the given code I get an overflow because of the 100% item which pushes the footer down causing an overflow scrollbar.\[code\]<div id="holder"> <-- this is set to 100% width & height as well as html, body <div id="header"> </div> <div id="inner_holder"> <-- This is the holder which is 100% </div> <div id="footer"> <div/></div>\[/code\]