双垂直滚动条显示在iFrame页面上

Question

我有一个包含左右iFrame的索引页面。出于某种原因，在第二个iFrame上，它显示了iFrame的滚动条和整个页面的另一个滚动条。

我一直在尝试删除整个页面的滚动条，只留下2个iFrame的滚动条

当我去改变css属性为body隐藏溢出时，html元素也删除了iFrams的滚动条

我甚至试图将iFrame元素设置为溢出-y：自动和正文，html溢出到隐藏。

那仍然无效。

我遇到的第二个问题是，即使我指定高度为100％，iFrame也不会一直延伸到页面底部。

我一直在摆弄CSS但到目前为止没有运气。如果有人能帮助我，我将不胜感激。

以下是我的网页链接和css代码段。谢谢!!!

html,body{ height: 100%; margin:0;padding:0; }
iframe{
    height:100%; margin:0;padding:0; border: 0;
}

http://15c04752.ngrok.com/simplemenu/menus/demo（在不同的浏览器中文字可能会变小，请点击键盘上的ctrl + cmd +以显示滚动条）

Answer 1

要删除整个页面的滚动条，请添加以下规则：

    body, html {
        overflow: hidden;
    }

要在iframe上启用滚动条，请添加以下属性：

<iframe ... scrolling="yes"></iframe>

Source

如果你同时添加两者，那就是它的样子：

整个页面没有滚动条，左侧iframe没有滚动条（因为内容完全可见），右侧iframe没有滚动条（因为内容不完全可见）。如果您缩小窗口，则会显示左侧iframe的滚动条。

Answer 2

使用iframe时，我遇到了类似的问题。包含iframe的元素不够长，无法证明第二个滚动条的合理性。它只是一个占用约600像素高度的youtube视频，因此我不需要第二个滚动条。对我来说，解决方法只是 html, body { height: 100%; } 在CSS中。如果那没有帮助，我的下一个最佳猜测就是使用webkit在其他所有方法均失败的情况下将其隐藏。