Question

我在网上看到过这个问题，并且所有建议的解决方案对我都不起作用，所以我以为我会来这里。

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

我已尝试将iframe width=height=100%放在单个表格元素中width=height=100%但如果我将窗口设置得太垂直，我会得到两个滚动条。

有什么建议吗？

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

Answer 1

<强>更新：

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% }

注意：我终于明白了你想要的东西！使用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;为我解决了这个问题。

Answer 4

对于仍然存在此双滚动条问题的任何人，您所要做的就是使用overflow：hidden包装iframe，然后为html，body，iframe和包装器添加100％的高度。 / p>

http://jsfiddle.net/KZ5wz/（我不知道为什么结果在JsFiddle中没有正确显示，但它在我的机器中像魅力一样工作）

Answer 5

<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>

Answer 6

要求很明确：

iframe上方有一个菜单栏，因此iframe似乎无法完全向下滚动到框架页面的底部。
必须隐藏窗口滚动条，而不是iframe滚动条。

我的解决方案非常简单：

使用overflow:hidden;隐藏窗口滚动条。
iframe高度不是通常的100％，而是100％减去菜单的高度和/或iframe上方的任何标题。我将假设菜单/标题占总高度的20％，但由于它通常具有固定的高度，因此最好在CSS3中将其计算为height: calc ( 100% - 120px );。 iframe周围的包装器可以是div或表格，宽度为100％，高度为100％。

以下是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"
            width="100%" height="80%"
            marginwidth="0" marginheight="0" frameborder="0"></iframe>
</table>

Answer 7

删除身体{身高：100％; }

Answer 8

嗯，这个问题已经过时了，但我今天遇到了同样的问题，但没有一个问题解决了我的问题。仅使用内部页面（相同域），也会出现两个垂直滚动条。一个用于导航加载的页面（正确），另一个用于调整iframe区域的高度（！）...使用外部源页面似乎运行良好。

我解决这个问题的方法是在内部页面的主体中添加一个类来加载，就像这样

<body class="internalPage">

并将以下内容放入我的CSS文件

body.internalPage{height: 99.5%;}

我希望将来有人帮助。

Answer 9

看到这个问题仍然没有答案，我想我会投入十美分。我想知道你是否玩过display:block / display:inline设置。没有完全理解您的问题，我不确定您将如何执行此操作，但我认为您可能希望将iframe更改为显示inline。

Answer 10

我通过动态分配iframe的高度解决了我的双滚动条问题。

StackOverflow - Dynamic change iframe height

Answer 11

这个问题有点老了，但我希望这对以后有所帮助。

对于我来说，iframe内的body和我的body具有css overflow并设置为隐藏，是的，这导致了双滚动条。对其进行更改即可解决问题。

body {
  overflow-y: hidden;
  /* Change to auto */
}

css overflow，css overflow的来源

Answer 12

如果您的整个页面内容都是iFrame，则只需添加样式：

<style>
    body {
        overflow: hidden;
    }
</style>

否则，您可以将其放在桌子上或潜水，而只需将其定位为目标。上面有一个答案可以解决表格。

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

12 个答案:

造型：

HTML：