How to get rid of the double scroll bar when using

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.

标签： html css iframe scrollbar

11条回答

神经病院院长

2楼-- · 2019-03-23 02:12

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.

0人赞添加讨论(0) 举报

仙女界的扛把子

3楼-- · 2019-03-23 02:12

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.

0人赞添加讨论(0) 举报

够拽才男人

4楼-- · 2019-03-23 02:16

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!

0人赞添加讨论(0) 举报

姐就是有狂的资本

5楼-- · 2019-03-23 02:21

I got my double scrollbar issue solved by dynamically assign iframe's height.

StackOverflow - Dynamic change iframe height

0人赞添加讨论(0) 举报

ら.Afraid

6楼-- · 2019-03-23 02: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>

0人赞添加讨论(0) 举报

神经病院院长

7楼-- · 2019-03-23 02:23

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>

0人赞添加讨论(0) 举报

1 2 下一页