<p>I have an application that I would like to embed inside our companies CMS. The only way to do that (I am told), is to load it in an <code>&lt;iframe&gt;</code>.</p>

<p>Easy: just set <code>height</code> and <code>width</code> to <code>100%</code>! Except, it doesn't work.</p>

<p>I did find out about setting <code>frameborder</code> to <code>0</code>, so it at least <em>looks</em> like part of the site, but I'd prefer not to have an ugly scrollbar <em>inside</em> a page that allready has one.</p>

<p>Do you know of any tricks to do this?</p>

<p><strong>EDIT:</strong> I think I need to clarify my question somewhat:</p>

<ul>
<li>the company CMS displays the fluff and stuff for our whole website</li>
<li>most pages created through the CMS</li>
<li>my application isn't, but they will let me embedd it in an <code>&lt;iframe&gt;</code></li>
<li>I have no control over the <code>iframe</code>, so any solution must work from the referenced page (according to the <code>src</code> attribute of the <code>iframe</code> tag)</li>
<li>the CMS displays a footer, so setting the height to 1 million pixels is not a good idea</li>
</ul>

<p>Can I access the parent pages DOM from the referenced page? This might help, but I can see some people might not want this to be possible...</p>

<p>This technique seems to work (<a href="http://bytes.com/forum/thread91876.html" rel="noreferrer">gleaned</a> from several sources, but inspired by the <a href="http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe" rel="noreferrer">link</a> from the accepted answer:</p>

<p>In parent document:</p>

<pre><code>&lt;iframe id="MyIFRAME" name="MyIFRAME" 
    src="http://localhost/child.html"
    scrolling="auto" width="100%" frameborder="0"&gt;
    no iframes supported...
&lt;/iframe&gt;
</code></pre>

<p>In child:</p>

<pre><code>&lt;!-- ... --&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
    function resizeIframe() {

        var docHeight;
        if (typeof document.height != 'undefined') {
            docHeight = document.height;
        }
        else if (document.compatMode &amp;&amp; document.compatMode != 'BackCompat') {
            docHeight = document.documentElement.scrollHeight;
        }
        else if (document.body 
            &amp;&amp; typeof document.body.scrollHeight != 'undefined') {
            docHeight = document.body.scrollHeight;
        }

        // magic number: suppress generation of scrollbars...
        docHeight += 20;

        parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";    
    }
    parent.document.getElementById('MyIFRAME').onload = resizeIframe;
    parent.window.onresize = resizeIframe;
&lt;/script&gt;               
&lt;/body&gt;
</code></pre>

<p><strong>BTW:</strong> This will only work if parent and child are in the same domain due to a restriction in JavaScript for security reasons...</p>

[{'answer_id': 58553, 'author': 'ralfe', 'author_id': 340241, 'author_profile': 'https://Stackoverflow.com/users/340241', 'pm_score': 3, 'selected': True, 'text': '<p>You could either just use a scripting language to include the page into the parent page, other wise, you might want to try one of these javascript methods:</p>\n\n<p><a href="http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe" rel="nofollow noreferrer">http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe</a>\n<a href="http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22840093.html" rel="nofollow noreferrer">http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22840093.html</a></p>\n'}, {'answer_id': 58562, 'author': 'Adam Hepton', 'author_id': 2268, 'author_profile': 'https://Stackoverflow.com/users/2268', 'pm_score': 0, 'selected': False, 'text': '<p>I might be missing something here, but adding <code>scrolling=no</code> as an attribute to the <code>iframe</code> tag normally gets rid of the scrollbars.</p>\n'}, {'answer_id': 58582, 'author': 'ConroyP', 'author_id': 2287, 'author_profile': 'https://Stackoverflow.com/users/2287', 'pm_score': 2, 'selected': False, 'text': '<p>Provided that your iframe is hosted on the same server as the containing page, you can <a href="http://www.esqsoft.com/javascript_examples/iframe_talks_to_parent/" rel="nofollow noreferrer">access it via javascript</a>.</p>\n\n<p>There are a number of suggested methods for <a href="http://www.programmersheaven.com/2/FAQ-JavaScript-Set-Iframe-Width-Height-Onload" rel="nofollow noreferrer">setting the iframe to the full height of the contents</a>, each with varying degrees of success - a google for this problem shows that it\'s quite a common one, with no real, one-size-fits-all consensus solution i\'m afraid!</p>\n\n<p>Several people have reported that <a href="http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm" rel="nofollow noreferrer">this script</a> does the trick, but may need <a href="http://www.daniweb.com/forums/post258858-4.html" rel="nofollow noreferrer">some modification</a> for your specific case (again, assuming your iframe and parent page are on the same domain).</p>\n'}]
['https://Stackoverflow.com/questions/58543', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2260/']