iframeの垂直スクロールバーを非表示にしてコンテンツ全体を表示

Question

iframeがあり、その内容がiframeの高さを超えています。私は100vhの高さを持つようにiframeにCSSを設定しましたが、コンテンツを切り落とします。 全体のコンテンツをとではなく、に表示すると、そのiframeにスクロールバーが表示されます。

これを達成する最も良い方法は何ですか？

HTML

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

CSS

iframe { 
    height: 100vh; 
} 

アップデート：私は、スクロールバーを調整する必要はありません 、私はすべてのコンテンツを示すことによって、それらを削除したいです。このように想像してみましょう。ページ上にiframeウィンドウ（スクロール不可）があります（スクロール可能）。

Answer 1

私は実際に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); 
} 

Answer 2

次のCSSコードを持つIFRAMEまたは任意の要素のスクロールバーを調整することができます。

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

Answer 3

あなたはIFRAMEからのコンテンツのアスペクト比を知っている必要があります。 は、例えば、ユーチューブの動画で、それは16：9

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

}