I\'ve seen this problem on the web, and all the suggested solutions aren\'t working for me, so I thought I\'d come here.
I have a page that has an iframe. The top of the
The requirements are clear:
My solution is very simple:
overflow:hidden;
.height: calc ( 100% - 120px );
. The wrapper around the iframe can be a div or a table with a width 100% and a height 100%.Here is my example with the iframe height set to 80% (of the window):
body {
overflow: hidden;
}
#hold_my_iframe {
padding:0px; margin:0 auto; width: 100%; height: 100%; overflow:scroll;
}
<table border="0" cellspacing="0" cellpadding="0" id="hold_my_iframe">
<iframe src="http:/example.com/my-iframed-page.php"
width="100%" height="80%"
marginwidth="0" marginheight="0" frameborder="0"></iframe>
</table>
Remove body { height:100%; }
If your entire page content is an iFrame then all you need is to add the style:
<style>
body {
overflow: hidden;
}
</style>
Otherwise you could place it in a table or dive and just target that element instead. There is an answer above that has the solution for a table.
Well, the question is old, but I had today the same problem, and none of the answers solved my problem. With internal pages (same domain) only, two vertical scrollbars appeared too. One to navigate the loaded page (correct), and another one to adjust a little bit the height of the iframe zone (!)... With external source pages it seems to work well.
The way I fixed this problem was to add a class to the body of the internal page to load, like this
<body class="internalPage">
and put the following in my CSS file
body.internalPage{height: 99.5%;}
I hope it helps someone in future.
It's a little old for this question but I do hope this would help in the future.
For my case, iframe
inside the body
and my body
has the css overflow
and set to hidden and yeah it caused a double scrollbar. Change it and it solved the problem.
body {
overflow-y: hidden;
/* Change to auto */
}
Source for css overflow
, css overflow
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 )