Auto-resizing iframes

Easy Way

In the Facebook application settings set "IFrame size" to "auto-resize".
Include the class "fb_canvas-resizable" in your <body> element. When you do so, code in modules/fb/fb_canvas.js will take care of the resizing.

So for example, you could have something like this in the page.tpl.php of your canvas theme (remember, you've built a canvas theme that looks good in the 760px wide frame that Facebook gives your application).

<body class="fb_canvas-resizable <?php print $body_classes; ?>">

Older/Alternate Way

If the approach described above does not work for you, please let us know on the issue queue.

When using canvas pages, you'd like the containing IFrame to resize to the correct height automatically, avoiding extra scrollbars. Here's how you do it:

In the Facebook application settings set "IFrame size" to "auto-resize" (as shown above).

Add the following snippet of javascript to the end of your theme's page.tpl.php, just before $closure:

    <script type="text/javascript">
      DFF_Canvas = function(){};
      DFF_Canvas.init = function() {
        FB.Canvas.setAutoResize();
      };
      jQuery(document).bind('fb_init', DFF_Canvas.init);
    </script>

For further discussion, see the original issue: #854168: Can't get Resizable IFrame to work (in iframe mode).