使用iframe时如何摆脱双滚动条？

Question

我在网上看到了这个问题,所有建议的解决方案都不适合我,所以我想我会来这里.

我有一个有iframe的页面.页面顶部是下拉菜单,页面的其余部分是iframe.像我确信其他人一样,这个想法是让菜单保持静止,菜单选择在iframe中运行一个应用程序.iframe的内容应该滚动,但整个页面不应该滚动.

我已经尝试将iframe width=height=100%放在单个表元素中,width=height=100%但如果我使窗口垂直太短,我会得到两个滚动条.

有什么建议？

我想我没有很好地解释自己.我想将iframe中的滚动条保持为自动,但我不想要整个页面的滚动条.我需要iframe适当大小,因此它总是占用页面的其余部分,因此浏览器不必创建滚动条,因为iframe永远不会延伸到查看区域的底部.

Answer 1

更新:

演示: 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标签作为容器!看演示并享受它!

Answer 2

将css overflow设置为隐藏在你想要摆脱滚动条的任何帧上......

overflow:hidden

Answer 3

我知道这有点旧,但这就是我为我的页面做的事情:

我有一个只有iFrame的页面,我希望它占用整个页面,所以我使用了

<iframe style="height:100%;width:100%" src="..."></iframe>

添加适当的填充/边距/边框删除后,我遇到了您描述的双滚动条问题.使用Chrome的检查功能,我发现页面的主体比iframe长约5px,所以我只修改了iframe代码:

<iframe style="height:100%;width:100%;margin-bottom:-5px;" src="..."></iframe>

这margin-bottom:-5px;解决了我的问题.