Since #header
and #footer
are fixed positioned, they are taken out of the document flow and have no relationship to #content
anymore.
Therefor you have to options (imho).
1) give the footer a fixed height, so you can do the padding trick, same as with your header.
2) use Javascript, since there is no pure CSS solution (except for 1. point).