HTML iframe maximum height, height:100% not working
<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>