Make iframe height auto based on its content

HTML & CSS
1

Hi,

I have an iframe on my page and I need its height to be the height of the content inside it. The iframe source is on the same domain. I have a JS solution for this but I am looking for a CSS solution if possible. I searched a lot and couldn’t find a working solution.

page.html:

<!DOCTYPE html>
<html>
<head>
	<title>Iframe</title>
</head>
<body>
	<iframe id="iframe" src="iframe.html"></iframe>
</body>
</html>

iframe.html:

<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>

Currently, the iframe on the page.html does not display the full content height of the iframe.html, it displays a vertical scrollbar.

Thanks for any ideas.

2

Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*       {margin:0;padding:0;}
html, 
body    {height:100%;  width:100%; overflow:hidden;}
table   {height:100%;  width:100%; table-layout:static; border-collapse:collapse;}
iframe  {float:left; height:100%; width:100%;}
.header {border-bottom:1px solid #000}
.content {height:100%;}
</style>
</head>
<body>

<table>
  <tr>
      <td class="header">
          <h4>
              <a 
                href="http://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height">
                Googled Solution
               </a>
          </h4>
      </td>
  </tr>
  <tr>
      <td class="content">
      <iframe src="iframe.html" frameborder="0"></iframe>
    </td>
  </tr>
</table>

</body>
</html>
3

Thanks for the reply. I would never ask a question here before spending hours on research. The code you provided makes the iframe cover the page 100%, which is not what I need. I just need the iframe to display its full height based on its content. Just like the one here: http://css-tricks.com/examples/iFrameResize/ . Which works fine but it is not CSS.

4

Is it possible to used PHP and frame instead of an iFrame?


<?php // ?>
<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
</head>
<body>

<div style='float:left; border:solid 1px red; padding:1em; background-color:#eee;'>
  <frame>
      <?php include 'iframe.html';?>
  </frame>
 </div> 

</body>
</html>
5

Nice perspective but sorry, I can’t use PHP in this case and frame is not supported in HTML 5 as far as I know. Thanks.

6

CSS can’t help here I’m afraid unless its the full page iframe as in John’s example or similar. You need js if you want to resize based on content.