Menu
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 page is a dropdown menu, the rest of the page is the iframe. The idea like I'm sure everybody else does, is to have the menu stay stationary and the menu selection runs an application in the iframe. The contents of the iframe should scroll, but the page as a whole should not.
I've tried putting the iframe width=height=100% inside a single table element also with width=height=100% but I get two scrollbars if I make the window too short vertically.
Any suggestions?
I think I didn't explain myself well. I want to keep the scroll bar in the iframe as auto, but I don't ever want a scroll bar for the whole page. I need the iframe to size appropriately so it always takes up exactly the remainder of the page so the browser doesn't have to make a scroll bar because the iframe should never extend off the bottom of the viewing area.
633
Add scrolling="no" attribute to the iframe.
Double scrollbar appears on the website then browsers are handling this weirdly, causing double scrollbars. So you should either turn off the Overflow-X option, as you most likely won't need it anyway, or find the height CSS code and remove it.
A simpler way is however, is to use a container div styled with overflow: hidden; to hide the scrollbar. Set the width and the height of the div, to be slightly less than that of your iframe. Hope this helps you.
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!
174
set css overflow to hidden on whatever frame you want to rid scroll bars from...
overflow:hidden
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.
30
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 )
23
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<body>
<iframe height="100%" width="100%" src="yourframe1.html"></iframe>
<iframe src="yourframe2.html" width="100%" height="100%"></iframe>
</body>
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>
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
40
Remove body { height:100%; }
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
