使用 iframe 时如何摆脱双滚动条？
Posted
技术标签:
【中文标题】使用 iframe 时如何摆脱双滚动条？【英文标题】：How to get rid of the double scroll bar when using an iframe? 【发布时间】：2011-02-15 01:39:01 【问题描述】：我在网上看到了这个问题，所有建议的解决方案都不适合我，所以我想我会来这里。
我有一个包含 iframe 的页面。页面顶部是一个下拉菜单，页面的其余部分是 iframe。我确信其他人都这样做的想法是让菜单保持静止，并且菜单选择在 iframe 中运行应用程序。 iframe 的内容应该滚动，但整个页面不应该滚动。
我已尝试将 iframe width=height=100% 也与 width=height=100% 一起放入单个表格元素中，但如果我将窗口垂直设置得太短，我会得到两个滚动条。
有什么建议吗？
我想我没有很好地解释自己。我想将 iframe 中的滚动条保持为自动，但我不想要整个页面的滚动条。 我需要适当调整 iframe 的大小，以便它始终完全占据页面的其余部分，这样浏览器就不必制作滚动条，因为 iframe 永远不应超出查看区域的底部。
【问题讨论】：
再次更新，这应该可以按预期工作！ ;-) 【参考方案1】：这个问题有点老了，但我希望这对未来有所帮助。
对于我的情况，body 和我的 body 中的 iframe 具有 css overflow 并设置为隐藏，是的，它导致了双滚动条。改一下，问题就解决了。
body
overflow-y: hidden;
/* Change to auto */
css 来源overflow, css overflow
【讨论】：
【参考方案2】：如果您的整个页面内容是 iFrame，那么您只需添加样式：
<style>
body
overflow: hidden;
</style>
否则，您可以将其放在表格中或潜水，然后只针对该元素。上面有一个答案，有一个表格的解决方案。
【讨论】：
【参考方案3】：我通过动态分配 iframe 的高度解决了我的双滚动条问题。
*** - Dynamic change iframe height
【讨论】：
【参考方案4】：要求很明确：
-
iframe 上方有一个菜单栏，因此 iframe 似乎无法完全向下滚动到框架页面的底部。
必须隐藏窗口滚动条，但不能隐藏 iframe 滚动条。
我的解决方法很简单：
-
用
overflow:hidden;隐藏窗口滚动条。
iframe 高度不是通常的 100%，而是 100% 减去菜单高度和/或 iframe 上方的任何标题。我将假设菜单/标题占总高度的 20%，但由于它通常具有固定高度，因此最好在 CSS3 中将其计算为height: calc ( 100% - 120px );。 iframe 周围的包装器可以是宽度为 100%、高度为 100% 的 div 或表格。
这是我将 iframe 高度设置为 80%（窗口的）的示例：
造型：
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"
margin margin frameborder="0"></iframe>
</table>
【讨论】：
【参考方案5】：更新：
演示： 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%
注意：
我终于明白你想要什么了！使用table 标签而不是div 标签作为容器！观看演示并享受它！
【讨论】：
我编辑了我的问题，我希望 iframe 滚动，但不是浏览器主页面。 你是救生员 :) (y)【参考方案6】：<style type="text/css">
body margin:0; overflow: hidden;
iframe border: none;
</style>
<body>
<iframe src="yourframe1.html"></iframe>
<iframe src="yourframe2.html" ></iframe>
</body>
【讨论】：
您的回答被自动低质量过滤器标记。请添加更多信息。你为什么建议这个代码？你做了什么改变。【参考方案7】：删除 身体身高：100%；
【讨论】：
【参考方案8】：看到这个问题仍然以某种方式没有答案，我想我会投入十美分。我想知道您是否使用过 display:block / display:inline 设置。不完全理解您的问题，我不确定您将如何执行此操作，但我认为您可能希望将您的 iframe 更改为显示 inline。
【讨论】：
【参考方案9】：嗯，这个问题很老了，但我今天遇到了同样的问题，没有一个答案能解决我的问题。仅对于内部页面（相同域），也出现了两个垂直滚动条。一个用于导航加载的页面（正确），另一个用于稍微调整 iframe 区域的高度（！）...对于外部源页面，它似乎运行良好。
我解决这个问题的方法是在要加载的内部页面的主体中添加一个类，像这样
<body class="internalPage">
并将以下内容放入我的 CSS 文件中
body.internalPageheight: 99.5%;
我希望它对将来的人有所帮助。
【讨论】：
【参考方案10】：对于仍然有这个双滚动条问题的任何人，您所要做的就是用一个带有溢出的元素包装 iframe：隐藏，然后为 html、body、iframe 和包装器添加 100% 的高度。
http://jsfiddle.net/KZ5wz/（我不知道为什么结果没有在 JsFiddle 中正确显示，但它在我的机器中就像一个魅力一样工作）
【讨论】：
【参考方案11】：我知道这有点旧，但这是我为我的页面所做的：
我有一个只有 iFrame 的页面，我希望它占据整个页面，所以我使用了
<iframe style="height:100%;width:100%" src="..."></iframe>
添加适当的填充/边距/边框删除后，我遇到了您描述的双滚动条问题。使用 Chrome 的检查功能，我发现页面的 body 比 iframe 长了大约 5px，所以我只是修改了 iframe 代码：
<iframe style="height:100%;width:100%;margin-bottom:-5px;" src="..."></iframe>
margin-bottom:-5px; 为我解决了这个问题。
【讨论】：
【参考方案12】：将 css 溢出设置为隐藏在要从中删除滚动条的任何帧上...
overflow:hidden
【讨论】：
我不只是希望滚动条消失，我希望滚动条消失，我编辑了我的问题以尝试使问题更清晰。以上是关于使用 iframe 时如何摆脱双滚动条？的主要内容，如果未能解决你的问题，请参考以下文章