<p>I would like to have an <code>iframe</code> take as much vertical space as it needs to display its content and not display a scrollbar. Is it at all possible ?</p>

<p>Are there any workarounds?</p>

[{'answer_id': 34663, 'author': 'Daniel Jennings', 'author_id': 3641, 'author_profile': 'https://Stackoverflow.com/users/3641', 'pm_score': 0, 'selected': False, 'text': '<p>This CSS snippet should remove the vertical scrollbar:</p>\n\n<pre class="lang-css prettyprint-override"><code>body {\n  overflow-x: hidden;\n  overflow-y: hidden;\n} \n</code></pre>\n\n<p>I\'m not sure yet about having it take up as much vertical space as it needs, but I\'ll see if I can\'t figure it out.</p>\n'}, {'answer_id': 34686, 'author': 'ceejayoz', 'author_id': 1902010, 'author_profile': 'https://Stackoverflow.com/users/1902010', 'pm_score': 5, 'selected': True, 'text': '<p>This should set the <code>IFRAME</code> height to its content\'s height:</p>\n\n<pre><code>&lt;script type="text/javascript"&gt;\nthe_height = document.getElementById(\'the_iframe\').contentWindow.document.body.scrollHeight;\ndocument.getElementById(\'the_iframe\').height = the_height;\n&lt;/script&gt;\n</code></pre>\n\n<p>You may want to add <code>scrolling="no"</code> to your <code>IFRAME</code> to turn off the scrollbars.</p>\n\n<p><em>edit:</em> Oops, forgot to declare <code>the_height</code>.</p>\n'}, {'answer_id': 288322, 'author': 'Adam', 'author_id': 33503, 'author_profile': 'https://Stackoverflow.com/users/33503', 'pm_score': 0, 'selected': False, 'text': '<p>Adding a <code>DOCTYPE</code> declaration to the <code>IFRAME</code> source document will help to calculate the correct value from the line</p>\n\n<pre><code>document.getElementById(\'the_iframe\').contentWindow.document.body.scrollHeight\n</code></pre>\n\n<p>see <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html" rel="nofollow noreferrer">W3C DOCTYPE for examples</a></p>\n\n<p>I was having problems with both IE and FF as it was rendering the <code>iframe</code> document in \'quirks\' mode, until I added the <code>DOCTYPE</code>.</p>\n\n<p>FF/IE/Chrome support: The .scrollHeight doesnt work with Chrome so I have come up with a javascript example using jQuery to set all <code>IFRAME</code> heights on a page based on the iframes content. NOTE: This is for reference pages within the your current domain.</p>\n\n<pre><code>&lt;script type="text/javascript"&gt;\n    $(document).ready(function(){\n        $(\'iframe\').each(function(){\n            var context = $(this);\n            context.load(function(event){ // attach the onload event to the iframe  \n                var body = $(this.contentWindow.document).find(\'body\');\n                if (body.length &gt; 0 &amp;&amp; $(body).find(\'*\').length &gt; 0) { // check if iframe has contents\n                    context.height($(body.get(0)).height() + 20);\n                } else {\n                    context.hide(); // hide iframes with no contents\n                }\n            });\n        });\n    });\n&lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 288456, 'author': 'Kornel', 'author_id': 27009, 'author_profile': 'https://Stackoverflow.com/users/27009', 'pm_score': 0, 'selected': False, 'text': '<p>The workaround is not to use <code>&lt;iframe&gt;</code> and preprocess code on server-side.</p>\n'}, {'answer_id': 1156747, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>Also check out this thread: <a href="https://stackoverflow.com/questions/754519/how-does-the-diggbar-dynamically-resize-its-iframes-height-based-on-content-not">How does the DiggBar dynamically resize its iframe&#39;s height based on content not on their domain?</a>.</p>\n\n<p>It addresses the same question.</p>\n'}]
['https://Stackoverflow.com/questions/34655', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1983/']