Fuyu, with a bit more time and after digesting your comments in your css and your paragraph before the C&P data in the middle frame, a couple of thoughts.
You question why your %'s don't seem to work:
Your main container height is "auto". A % of auto is anything. Set your container to a specific height, then you can use % from then on since there is a constant to take a % of. (You can use code to determine the client window and dynamically set this to their display window.)
Your #middle should have the height specified, (you seem to want it about 80% of the container), rather than one of the 2 selectors (.mainpane). The submenus should not be inside the .mainpane, so your .mainpane /div should be before the submenus div. The #submenus and .mainpane can now be set to 100% (of #middle 80% of #container).
#submenu2 has to also be 50% to fill the entire 100%. With it set at auto it will automatically stop at the end of the data.
Hint: Keeping track of beginning and ending elements can be visualized easier by making a note to yourself including with the canceling tag:
Code:
<div id="general" class="specific">
Your content and code
</div> <!-- general.specific -->
A font size for the css body should be specified in em's, either a constant or %, for browser resolution consistency. Setting margin and padding to 0 in the body sets the browser's starting point.
.