How to get rid of the double scroll bar when using an iframe?

I know this was a bit old, but here's what I did for my page:

I had a page with just an iFrame, and I wanted it to take up the entire page, so I used

<iframe style="height:100%;width:100%" src="..."></iframe>

After I added the appropriate padding/margin/border removal, I had the double scrollbar problem you described. Using Chrome's inspect feature, I discovered that the body of the page was about 5px longer than the iframe, so I just modified the iframe code:

<iframe style="height:100%;width:100%;margin-bottom:-5px;" src="..."></iframe>

That margin-bottom:-5px; fixed the issue for me.

set css overflow to hidden on whatever frame you want to rid scroll bars from...

overflow:hidden

For anyone who still having this double scrollbar issue, all you have to do is to wrap the iframe with an element with overflow: hidden, then add a 100% height to the html, body, iframe, and the wrapper.

http://jsfiddle.net/KZ5wz/ ( i don't know why the result is not displayed properly in JsFiddle but it is working like a charm in my machine )

UPDATED:

DEMO: http://jsbin.com/ewomi3/3/edit

HTML

<table border=0 cellspacing=0 cellpadding=0 id="hold_my_iframe">
    <iframe src="http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow" width=100% height=100% marginwidth=0 marginheight=0 frameborder=0></iframe>
</table>

CSS

* { margin:0 padding:0 }
body { margin:0; padding:0; text-align:center }  
#hold_my_iframe { padding:0px; margin:0 auto; width:100%; height:100% }

NOTE: I have finally understood what you want! Use table tag instead of a div tag as container! See the demo and enjoy it!