Div 100% height works on Firefox but not in IE

I think “works fine in Firefox” is in the Quirks mode rendering only.
In the Standard mode rendering, that might not work fine in Firefox too.

percentage depends on “containing block”, instead of viewport.

CSS Specification says

The percentage is calculated with
respect to the height of the generated
box’s containing block. If the height
of the containing block is not
specified explicitly (i.e., it depends
on content height), and this element
is not absolutely positioned, the
value computes to ‘auto’.

so

#container { height: auto; }
#container #mainContentsWrapper { height: n%; }
#container #sidebarWrapper { height: n%; }

means

#container { height: auto; }
#container #mainContentsWrapper { height: auto; }
#container #sidebarWrapper { height: auto; }

To stretch to 100% height of viewport, you need to specify the height of the containing block (in this case, it’s #container).
Moreover, you also need to specify the height to body and html, because initial Containing Block is “UA-dependent”.

All you need is…

html, body { height:100%; }
#container { height:100%; }