Note that there are some explanatory texts on larger screens.

plurals
  1. POIframe { height:70%;} not working in IE 8 and Firefox
    text
    copied!<p>I have a div contained site design in which i have inserted a iframe to load pages.<br/> <code>header stays at top well</code><br/> <code>footer stays at bottom very well</code><br/> <code>content stays at the middle well too</code><br/></p> <p>But the iframe isn't stretching to the full height of the container. <code>i have not mentioned height in pixels in the style</code></p> <p>But when i wrote</p> <pre><code>iframe { margin:0; padding:0; min-height:72%; width:100%; background-color:#ddd; } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;div id="container"&gt; &lt;div id="header"&gt; blah blah &lt;/div&gt; &lt;div id="content"&gt; &lt;div id="menu"&gt; some code of menu &lt;/div&gt; &lt;div id="iframeDiv" class="contentdiv"&gt; &lt;iframe src="#" id="#" width="100%"&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt;blah blah&lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>html, body { margin:0; padding:0; height:100%; width:100%; } iframe { margin:0; padding:0; height:72%; width:100%; } #container { min-height:100%; position:relative; width:100%; } #content { padding:10px; padding-bottom:30px; } </code></pre> <p><strong>I tried writing styles for #iframeDiv but nothing seems to work!</strong></p> <p>it stretched till footer, but this works only in chrome. ie is not sensing the background color too. firefox displyed the backgroundcolor but not stretched to 72%. how to stretch iframe height to 72% for all browsers. ? <img src="https://i.stack.imgur.com/roV3Q.jpg" alt="enter image description here"> <img src="https://i.stack.imgur.com/vKsJP.jpg" alt="enter image description here"></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload