title: How to make a div dynamically size to screen height with dynamic header
body: <p>I have three parts to my main page</p>
  
  <ul>
  <li>A nav bar</li>
  <li>An announcement bar</li>
  <li>The main content</li>
  </ul>
  
  <p>As the content of the announcements are dynamic, I have trouble figuring out how to size the main content to the rest of the body.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="nav"&gt;..nav content..&lt;/div&gt;
  &lt;div id="announcements"&gt;&lt;p&gt;some text here&lt;/p&gt;&lt;/div&gt;
  &lt;div id="content-wrap"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I have tried to measure the height of the nav and announcements and then do <code>height:calc(1vh - 15px)</code>, however this will be inaccurate when the announcements change.</p>
  
  <p>Thank you</p>