Facebook Tab Height Scroll Bar

问题:

I make a simple html page and set it on facebook fan page tab but the tab which shows on fan page is shows a scroll bar buti already set to auto resize and the height of this html page is large i want to hide the scroll bar and show the complete page

回答1:

The best solution I found, which works for me is:

You need to setup the Facebook app canvas settings, Canvas height to Fluid.

 Then, add some javascript in the page header:

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.Canvas.setAutoResize();
</script>

Finally, force our body and html tag to avoid scroll bars in css.

body, html {
    overflow:hidden;
}

This has worked for me to remove all the scroll bars. It's working on the 18th of October 2011, but because Facebook keep changing their code, it may change in the future.

A full article about Facebook iframe is available on my blog: http://gpiot.com/facebook-page-tab-hide-scroll-bars-from-iframe/

回答2:

Thanks to all of you.

Here is the answer of my question; I posted it here so that if any body find this question in future will also get the answer and his/her time is not wasted. I get the solution by adding the following code just before the </body> tag of my index page

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Once again, thanks to all.

回答3:

This solution works for me http://aarosant.com/2011/03/14/adjust-the-size-of-facebook-iframe-tabs/

回答4:

GO TO the App Setting -> Advanced setting -> canvas page there you can change width and height to fixed from fluid