Question

首先是fiddle

我正在尝试将iframe集成为div，我知道如果这是一个普通的iframe，但是这个iframe里面有一个滑块。结果，右侧出现两个滚动条。

HTML code：

<div class="container">
    <div class="h_iframe">
        <iframe  src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS代码：

html,body {height:100%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

有什么办法可以让iframe像div一样运行，这样页面就会有一个滚动条。 overflow:none会从iframe中删除滚动条。

任何帮助将不胜感激。

Answer 1

其他答案在这种情况下已经很好用了，但我想指出的想法是让外框“不存在”，而不是让iframe与页面混合。这适用于这种情况，其中内部iframe旨在填充整个页面。

然而，遗憾的是，一般来说（在写作时）没有简单的方法可以“整合像if一样的iframe”。

有一个属性<iframe seamless>完全符合您的要求（嵌入iframe就像div一样），但目前在任何主流浏览器中都不起作用。见：http://caniuse.com/#feat=iframe-seamless。可能有一些方法可以使用Javascript来模拟这个：例如https://github.com/ornj/seamless-polyfill iframe中的页面使用Javascript将其scrollHeight（使用postMessage）传递到外部页面，然后使用Javascript更改iframe的高度，以便整个页面都在iframe可以不滚动显示。

Answer 2

添加溢出：像这样隐藏到你的CSS。我在你的小提琴中试过它并且它有效。

html,body        {height:100%;overflow:hidden}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

Answer 3

在此特定情况下，使用整页Get-Help about_Scopes -Full，将您的正文标记的iframe设置为0：

＆＃13;

margin

＆＃13;

html,body{
    height:100%;
}
body{
    margin:0;
}
.h_iframe iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

＆＃13;

Answer 4

你不能写css来影响iframe的内部内容......但你可以在你的身体上添加overflow: hidden;。

使用滚动将iframe集成为div

4 个答案: