如何摆脱使用iframe时的双滚动条问题 [英] How to get rid of the double scroll bar problem when using an iframe

问题描述

我在网上看到这个问题，所有建议的解决方案都不适合我，所以我以为我会来这里。
我有一个有一个iframe的页面。页面的顶部是下拉菜单，页面的其余部分是iframe。像我确信每个人都这样想，是让菜单保持固定，菜单选择运行在iframe中的应用程序。 iframe的内容应该滚动，但页面作为一个整体不应该。
我已经尝试把iframe width = height = 100％放在单个表格元素中，还有 width = height = 100％ / code>，但如果我使窗口垂直太短，我会得到两个滚动条。

有任何建议吗？

我想我没有很好地解释自己。我想保持滚动条在iframe为自动，但我不想要一个滚动条的整个页面。
我需要iframe的大小适当，所以它总是占用页面的剩余部分，所以浏览器不必制作一个滚动条，因为iframe不应该延伸到观看区域的底部。 p>

解决方案

UPDATED：

演示： http://jsbin.com/ewomi3/3/edit

HTML

  = 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; padding：0; text-align：center}
#hold_my_iframe {padding：0px; margin：0 auto; width：100％; height：100％}


>
我终于明白你想要什么了！使用 table 标记，而不是将 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屋！