Html 使用 iframe 时如何摆脱双滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2758732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get rid of the double scroll bar when using an iframe?
提问by stu
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.
我有一个带有 iframe 的页面。页面顶部是一个下拉菜单，页面的其余部分是 iframe。我相信其他人都这样做的想法是让菜单保持静止，菜单选择在 iframe 中运行一个应用程序。iframe 的内容应该滚动，但整个页面不应该滚动。
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.
我试过将 iframe 也width=height=100%放在单个表格元素中，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.
我想我没有很好地解释自己。我想将 iframe 中的滚动条保留为自动，但我不想要整个页面的滚动条。我需要 iframe 的大小适当，以便它始终完全占据页面的其余部分，因此浏览器不必制作滚动条，因为 iframe 永远不应超出查看区域的底部。
采纳答案by Luca Filosofi
UPDATED:
更新：
DEMO:http://jsbin.com/ewomi3/3/edit
演示：http : //jsbin.com/ewomi3/3/edit
HTML
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
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 tabletag instead of a divtag as container! See the demo and enjoy it!
注意：我终于明白你想要什么了！使用table标签而不是div标签作为容器！观看演示并享受它！
回答by Gabe
set css overflow to hidden on whatever frame you want to rid scroll bars from...
将 css 溢出设置为隐藏在您想要从中删除滚动条的任何框架上...
overflow:hidden
回答by Liam Dawson
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 的页面，我希望它占据整个页面，所以我使用了
<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:
添加适当的填充/边距/边框删除后，我遇到了您描述的双滚动条问题。使用Chrome的inspect功能，发现页面的body比iframe长了5px左右，所以就修改了iframe代码：
<iframe style="height:100%;width:100%;margin-bottom:-5px;" src="..."></iframe>
That margin-bottom:-5px;fixed the issue for me.
那margin-bottom:-5px;为我解决了这个问题。
回答by Heri Hehe Setiawan
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.
对于仍然有这个双滚动条问题的任何人，您所要做的就是用一个带有溢出的元素包装 iframe：隐藏，然后为 html、body、iframe 和包装器添加 100% 的高度。
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 )
http://jsfiddle.net/KZ5wz/（我不知道为什么结果在 JsFiddle 中没有正确显示，但它在我的机器上就像一个魅力）
回答by Fabio R Cardoso
<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>
回答by Ian Onvlee
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.
- iframe 上方有一个菜单栏，因此 iframe 似乎无法完全向下滚动到框架页面的底部。
- 必须隐藏窗口滚动条，但不能隐藏 iframe 滚动条。
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%.
- 用 隐藏窗口滚动条
overflow:hidden;。 - iframe 高度不是通常的 100%，而是 100% 减去菜单和/或 iframe 上方的任何标题的高度。我将假设菜单/标题占总高度的 20%，但由于它通常具有固定高度，因此最好在 CSS3 中将其计算为
height: calc ( 100% - 120px );. iframe 周围的包装器可以是宽度为 100% 和高度为 100% 的 div 或表格。
Here is my example with the iframe height set to 80% (of the window):
这是我将 iframe 高度设置为 80%（窗口的）的示例：
styling:
造型：
body {
overflow: hidden;
}
#hold_my_iframe {
padding:0px; margin:0 auto; width: 100%; height: 100%; overflow:scroll;
}
html:
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>
回答by Irshad Khan
Remove body { height:100%; }
移除身体 { 高度：100%; }
回答by Jennifer Zhao
I got my double scrollbar issue solved by dynamically assign iframe's height.
我通过动态分配 iframe 的高度解决了我的双滚动条问题。
回答by ricardoc
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.
好吧，这个问题很老，但我今天遇到了同样的问题，没有一个答案解决了我的问题。仅使用内部页面（同一域），也会出现两个垂直滚动条。一个用于导航加载的页面（正确），另一个用于稍微调整 iframe 区域的高度（！）...使用外部源页面似乎运行良好。
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
并将以下内容放入我的 CSS 文件中
body.internalPage{height: 99.5%;}
I hope it helps someone in future.
我希望它可以帮助将来的某个人。
回答by Cosine
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:inlinesettings. Not fully understanding your question, I'm not exactly sure how you would do this, but I think you might want to change your iframeto displaying inline.
看到这个问题仍然没有答案，我想我会投入我的十美分。我想知道你是否玩过display:block/display:inline设置。没有完全理解你的问题，我不完全相信你会怎么做，但我想你可能希望将改变iframe以显示inline。
