title: div fill remaining height css
body: <p>I have this code:<br>
  HTML:  </p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="menu"&gt;  
  menu elements...  
  &lt;/div&gt;  
  &lt;div id="main"&gt;  
  Main website content...  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:  </p>
  
  <pre><code>body{background-color:CCCCFF;}
  div#menu{background-color:#000000;display:table;height:45px;}
  div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}
  </code></pre>
  
  <p>The menu div is a horizontal menu bar.<br>
  I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.<br>
  Is it possible to do what I want?<br>
  Thank you for your time!</p>