隐藏 iframe 垂直滚动条并显示全部内容答案

【问题标题】：Hide iframe vertical scrollbar and show the whole content隐藏 iframe 垂直滚动条并显示全部内容
【发布时间】：2016-05-27 21:58:48
【问题描述】：

我有一个 iframe，它的内容超出了 iframe 的高度。我已将 iframe 上的 CSS 设置为 100vh 的高度，但是它会裁剪掉内容。我想显示 全部内容 并且不在该 iframe 中显示任何滚动条。

实现这一目标的最佳方法是什么？

HTML

 <iframe id="testIframe" width="100%" scrolling="no" style="display:block;"></iframe>

CSS

iframe {
    height: 100vh;
}

更新： 我不想调整滚动条，我想通过显示所有内容来删除它们。想象一下，我在页面（可滚动）上有一个 iframe 窗口（不可滚动）。

【问题讨论】：

但是那不会增加一个垂直滚动条吗？
在小提琴中添加您的代码，以便我们可以查看您的 css 和 iframe 代码。

标签： javascript html css iframe

【解决方案1】：

您可以使用以下 css 代码调整 iframe 或任何元素的滚动条：

iframe{ width:500px; height: 500px; overflow-x: hidden; overflow-y: scroll }

【讨论】：

我不想调整滚动条，我想通过显示所有内容来移除它们。想象一下，我在页面（可滚动）上有一个 iframe 窗口（不可滚动）。

【解决方案2】：

您必须知道 iframe 内容的纵横比。例如，在 youtube 视频中是 16:9

iframe {
    // Aspect ratio 16:9 
    // width:height
    width: 177.77vH;// (100vH / 9) * 16
    height: 100vH;

}

【讨论】：

是的，这很好，但是无论内容有多长，我仍然无法摆脱滚动条并显示所有内容。
如果纵横比正确，可以看到全部内容。 overflow: hidden 应该移除滚动条。
你能分享一个JSFiddle jsfiddle.net ，以便我们更好地理解，问题是什么。

【解决方案3】：

实际上，我通过 jQuery 使用这种方法自己解决了这个问题。

$('testIframe').on('load', function(){
      resizeIframe(this);
    });
...
function resizeIframe(obj) {    
  // Initially just set the height to 100% till the inner page loads and once the page inside the iframe is loaded
  // then set the iframe height to match that page height so that it looks seamless to the user
  obj.style.height = "100vH";

  setTimeout(function(){
    obj.style.display = "block";
    obj.style.height = $(obj.contentWindow.document.body).height() + "px";
  }, 1500);
}

【讨论】：