HTML iframe - 双滚动条答案

【问题标题】：HTML iframe - Double Scrolling BarsHTML iframe - 双滚动条
【发布时间】：2014-08-11 16:57:46
【问题描述】：

我设置了一个如下所示的 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 上的滚动条并使用浏览器的滚动条上下导航页面？

谢谢！

【问题讨论】：

我用javascript来设置iframe的高度。
非常感谢你，托尼！你能解释一下如何使用javascript设置iframe iframe的高度吗？
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;document.getElementById("myIframe").style.height = (h-200) + "px"; ps.200 是 iframe 中不包含的高度。

标签： html css

【解决方案1】：

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

演示：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>

【讨论】：

BootstrapTheme，非常感谢您的帮助！看起来很神奇，iframe 的滚动条不见了！我想知道为什么我们需要.embed-container object 和.embed-container embed？我在您的代码中没有看到 object 和 embed。谢谢
以防万一，如果您不使用它，请删除。如果您发现此答案有用，请选择它。
嗨 BootstrapTheme，我试了一下，效果很好。但是，如果我再添加 2 个<div>s，一个在顶部，另一个在左侧，就会出现 iframe 的滚动条！ [jsbin.com/huviko/1]你有什么想法吗？
当然会，宽度和高度是视口的 100%，如果其他东西占用了那个空间，那么 iframe 的容器需要有负边距或其他东西，例如 jQuery .要做的是用相同的代码和 jSBin 或 Fiddle 提出一个新问题。我
谢谢你，BoostrapTheme！我打开一个位于 [stackoverflow.com/questions/25286626/… 的新问题。请看一看。

【解决方案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>

【讨论】：

欢迎来到 StackOverflow。虽然您的代码 sn-p 可能会回答这个问题，但提供有关您的代码 sn-p 为何和/或如何工作的额外上下文可以提高其长期价值。