Set div height as percentage of window

Hi all

I know this is simple but I just can't work it out.

I have two div's in a wrapping div. I want to set the two div's height as a percentage of the window.

I have set the html/body's height to 100% and the wrapping div to min-height:100%;

http://www.ttmt.org.uk/forum/css/

How can I set the top div to 80% of the height and the bottom to 30%

Code:
<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
  
  <style type="text/css">
    html, body{
      height:100%;
    }
    #wrap{
      min-height:100%;
    }
    #top{
      background:red;
      height:80%;
    }
    #bottom{
      background:#eee;
      height:30%;
    }
  </style>
  
  </head>
  
<body>
  
  <div id="wrap">
    
    <div id="top">
      <h1>top</h1>
    </div>
    
    <div id="bottom">
      <h1>bottom</h1>
    </div>
    
  </div><!-- #wrap -->

</body>

</html>