发表新帖
发表新帖

How to get rid of the double scroll bar when using an iframe?

后端 未结
关注
12 1424
耶瑟儿～
耶瑟儿～ 2021-02-07 00:19

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

相关标签:
12条回答
  • 没有蜡笔的小新
    2021-02-07 01:04

    The requirements are clear:

    1. 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.
    2. The window scrollbar must be hidden but not the iframe scrollbar.

    My solution is very simple:

    1. Hide the window scrollbar with overflow:hidden;.
    2. 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)
  • 借酒劲吻你
    2021-02-07 01:09

    Remove body { height:100%; }

    0 讨论(0)
  • 广开言路
    2021-02-07 01:10

    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.

    0 讨论(0)
  • 隐瞒了意图╮
    2021-02-07 01:11

    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)
  • 生来不讨喜
    2021-02-07 01:13

    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

    0 讨论(0)
  • 失恋的感觉
    2021-02-07 01:24

    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 )

    0 讨论(0)
 看不清?
提交回复
热议问题