title: HTML iframe maximum height, height:100% not working
body: <p>I want to set the height of iframe to expand to the rest of available space (ie windowsHeight - menuHeight - footerHeight), as used in contentFrame, which does not work for me. It works when height is set to specific pixels.The width:100% works. Because the app is a legacy app,  it should be compatible with IE 10/11, Chrome, and Firefox.</p>
  
  <p>index.htm       </p>
  
  <pre><code>&lt;body&gt;
  &lt;iframe name="menuFrame" src="menu.htm" frameborder="1" style="height:40px; width: 100%;"&gt;
  &lt;/iframe&gt;
  &lt;iframe name="contentFrame" src="content.htm" frameborder="1" style="height:100%; width: 100%;"&gt;
  &lt;/iframe&gt;
  &lt;iframe name="footerFrame" src="footer.htm" frameborder="1" style="height:15px; width: 100%;"&gt;
  &lt;/iframe&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>menu.htm</p>
  
  <pre><code>&lt;body&gt;
  menu
  &lt;/body&gt;
  </code></pre>
  
  <p>content.htm</p>
  
  <pre><code>&lt;body style="border: solid 1 black;height: 100%;"&gt;
  content
  &lt;/body&gt;
  </code></pre>
  
  <p>footer.htm  </p>
  
  <pre><code>&lt;body&gt;
  footer
  &lt;/body&gt; 
  </code></pre>
  
  <p><strong>Update</strong>
  Thanks all for your help. I tested LGSon's only, which is easier for me to understand.</p>