title: Use window.innerHeight to set div height in HTML
body: <p>I have three <code>div</code> elements (header, middle and footer) and I want to fix the header and the footer to height of 100px, and the middle to have a dynamic height per the window inner height.</p>
  
  <p>I tried the following without success:</p>
  
  <pre><code>&lt;div id="header" style="background-color:white;width:100px; height:12vh; margin: 0; padding: 0 ;border:0;"&gt;&lt;/div&gt;
  &lt;div id="map_canvas" style="background-color:black;width:window.innerHeight-200;height:78vh;margin: 0; padding: 0 ;border:0"&gt;&lt;/div&gt;
  &lt;div id="footer" style="background-color:white;width:100px; height:10vh; margin: 0; padding: 0 ;border:0;bottom:0px"&gt;&lt;/div&gt;
  </code></pre>