Question

我设置了如下的iframe

<iframe src="http://www.bbc.com/" frameborder="0" width="100%"></iframe>

CSS

iframe { overflow:hidden;
         min-height:600px}

出现2个水平滚动条，1个位于iframe，另一个位于浏览器。

我想摆脱iframe的吧台，我试试

 <iframe src="yahoo.com" scrolling="no" frameborder="0" width="100%"></iframe>

然后iframe的滚动条消失了，问题是我看不到BBC网站底部的任何内容！

我可以将min-height增加到更大的数字以涵盖BBC网页的整个长度，但有时页面很短，我会在底部获得一个巨大的空白区域！因此，增加min-height不是一个好习惯。

如何删除iframe的滚动条并使用浏览器的滚动条上下导航页面？

谢谢！

Answer 1

有不同的方法可以做到这一点。还有jQuery解决方案。这将有助于您入门：

DEMO：http://jsbin.com/voqubo/1

CSS

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

html {overflow-y:auto}

.embed-container {
    position: relative;
    height: 100%;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class='embed-container'><iframe src='http://www.bbc.com/' style='border:0'></iframe></div>

Answer 2

<iframe 
    src="http://maroof.sa/Business/GetStamp?bid=203783" 
    style=" width: auto; height: 250px; overflow-y:hidden;  "  
    frameborder="0" 
    seamless='seamless' 
    scrollable="no">
</iframe>

HTML iframe - 双滚动条

2 个答案:

DEMO：http://jsbin.com/voqubo/1