Making an iframe take vertical space

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

Are there any workarounds?

From stackoverflow

• This CSS snippet should remove the vertical scrollbar:

  body {
  overflow-x: hidden;
  overflow-y: hidden;
  }
  

  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.

• This should set the IFRAME height to its content's height:

  <script type="text/javascript">
  the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
  document.getElementById('the_iframe').height = the_height;
  </script>
  

  You may want to add scrolling="no" to your IFRAME to turn off the scrollbars.

  edit: Oops, forgot to declare the_height.

  ConroyP : Very handy, cheers. Might be worth mentioning that this won't work so well if the iframe is on a different domain due to the same origin policy

• @Daniel

  I don't mind the body scrollbar, I would actually rather have that one than have the iframe generate a second set of toolbars that take only part of the page.

  @Teifion

  This would not work, you can set a height in pixel for the iframe though, but I find that a rather ugly solution (setting the iframe height to some random large value)

• Adding a DOCTYPE declaration to the IFRAME source document will help to calculate the correct value from the line

  document.getElementById('the_iframe').contentWindow.document.body.scrollHeight
  

  see W3C DOCTYPE for examples

  I was having problems with both IE and FF as it was rendering the iframe document in 'quirks' mode, until I added the DOCTYPE.

  FF/IE/Chrome support: The .scrollHeight doesnt work with Chrome so I have come up with a javascript example using jQuery to set all IFRAME heights on a page based on the iframes content. NOTE: This is for reference pages within the your current domain.

  <script type="text/javascript">
      $(document).ready(function(){
          $('iframe').each(function(){
              var context = $(this);
              context.load(function(event){ // attach the onload event to the iframe  
                  var body = $(this.contentWindow.document).find('body');
                  if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
                      context.height($(body.get(0)).height() + 20);
                  } else {
                      context.hide(); // hide iframes with no contents
                  }
              });
          });
      });
  </script>
  

• The workaround is not to use <iframe> and preprocess code on server-side.

• Also check out this thread: http://stackoverflow.com/questions/754519/how-does-the-diggbar-dynamically-resize-its-iframes-height-based-on-content-not.

  It addresses the same question.