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.

width=height=100%

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.

updated once more, this should work as expected! ;-)
– Luca Filosofi
May 3 '10 at 19:24

11 Answers
11

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!

table

div

I edited my question, I want the iframe to scroll, but not the main browser page.
– stu
May 3 '10 at 15:19

I'll have to go learn me some more css. thanks.
– stu
May 3 '10 at 20:03

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

overflow:hidden

I don't just want the scrollbar to go away, I want the need for the scroll bar to go away, I edited my question to try and make the problem more clear.
– stu
May 3 '10 at 15:18

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.

margin-bottom:-5px;

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>

Your answer was flagged by the automatic low quality filter. Please add some more information. Why are you suggesting this code? What changes do you made.
– idmean
Jun 17 '14 at 13:28

The requirements are clear:

My solution is very simple:

overflow:hidden;

height: calc ( 100% - 120px );

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%;

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.internalPageheight: 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.

display:block

display:inline

iframe

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.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt