Question

我有一个iframe，其内容超出了iframe的高度。我已经将iframe上的CSS设置为100vh的高度，但是它会关闭内容。我想显示整个内容，不显示该iframe中的任何滚动条。

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

HTML

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

CSS

iframe {
    height: 100vh;
}

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

Answer 1

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

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

Answer 2

您必须知道iframe内容的宽高比。例如，在YouTube视频中，它是 16：9

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

}

Answer 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);
}

隐藏iframe垂直滚动条并显示整个内容

3 个答案: