How to get rid of the double scroll bar when using an iframe?
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开发者_JS百科 iframe should never extend off the bottom of the viewing area.
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!
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.
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 )
<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:
- There is a menu bar above the iframe, due to which the iframe doesn't seem to be able to scroll fully down to the bottom of the framed page.
- The window scrollbar must be hidden but not the iframe scrollbar.
My solution is very simple:
- Hide the window scrollbar with
overflow:hidden;. - Give the iframe height not the usual 100% but 100% minus the height of the menu and/or whatever header is above the iframe. I will assume that the menu/header takes up 20% of the total height, but since it usually will be of a fixed height, one can perhaps best calculate it in CSS3 as
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):
styling:
body {
overflow: hidden;
}
#hold_my_iframe {
padding:0px; margin:0 auto; width: 100%; height: 100%; overflow:scroll;
}
html:
<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
Remove body { height:100%; }
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.
Seeing as this question is still unanswered somehow, I figured I'd throw in my ten cents. I was wondering if you've played around with the display:block / display:inline settings. Not fully understanding your question, I'm not exactly sure how you would do this, but I think you might want to change your iframe to displaying inline.
I got my double scrollbar issue solved by dynamically assign iframe's height.
StackOverflow - Dynamic change iframe height
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.
加载中,请稍侯......
精彩评论