如何在使用iframe时摆脱双滚动条？ [英] How to get rid of the double scroll bar when using an iframe?

问题描述

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

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

我试过把iframe放到 width = height = 100 ％在单个表格元素中也有 width = height = 100％，但是如果我使窗口垂直过短，我会得到两个滚动条。 p>

有什么建议？

我想我没有很好地解释自己。我想保持iframe中的滚动条作为自动，但我不希望整个页面的滚动条。
我需要iframe进行适当的大小调整，因此它总是占用页面的剩余部分，因此浏览器无需创建滚动条，因为iframe不应该延伸到查看区域的底部。

解决方案

更新： DEMO： http://jsbin.com/ewomi3/3/edit p>

HTML

 < table border = 0 cellspacing = 0 cellpadding = 0 id =hold_my_iframe> 
< iframe src =http://www.w3schools.com/css/tryit.asp?filename=trycss_overflowwidth = 100％height = 100％marginwidth = 0 marginheight = 0 frameborder = 0>< / IFRAME> 
< / table> 
  

CSS
< pre class =lang-css prettyprint-override> * {margin：0 padding：0}
body {margin：0;填充：0; text-align：center}
#hold_my_iframe {padding：0px;保证金：0汽车;宽度：100％;身高：100％}


注意：
我终于明白你想要什么了！使用表标记代替 div 标记作为容器！看演示，并享受它！

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.

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.

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.

解决方案

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!

这篇关于如何在使用iframe时摆脱双滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！