发表新帖
发表新帖

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

后端 未结
关注
12 1422
耶瑟儿～
耶瑟儿～ 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 00:57

    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.

    0 讨论(0)
  • 甜味超标
    2021-02-07 00:57 
    <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)
  • 情深已故
    2021-02-07 00:59

    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)
  • 遥遥无期
    2021-02-07 01:01

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

    StackOverflow - Dynamic change iframe height

    0 讨论(0)
  • 梦毁少年i
    2021-02-07 01:03

    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)
  • 情深已故
    2021-02-07 01:04

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

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