How to offset content under a navbar when using height:100%?

How to offset content under a navbar when using height:100%?

Consider the following code:
HTML menu
CSS
#menu {
position: fixed;
top:0;
left:0;
width:100%;
height:50px
}
#wrapper {
position: fixed;
top: 50px;
width:100%;
height:100%;
overflow: auto;
}
I want the wrapper to sit beneath the fixed nav, and scroll all the
contents. The effect is that the scrollbar starts from below the nav
instead of above it.
However, because of the top:50px offset, the bottom of the wrapper is 50px
off the screen. How can I fix this and still have it 100% height of
remaining screen estate?
IMPORTANT: I need this to be IE8 compatible
Thanks