包含IFRAME的DIV樣式不需要滾動

Question

如何在div容器中插入iframe，從而永遠不會有嵌入式iframe內容的滾動條（嵌入的內容永遠不會很寬，但通常足夠高使垂直滾動條出現）。

換句話說，鑑於

<div class="embedded"> 
    <iframe class="embedded" src="http://xxx.yyy.zzz/content.html"></iframe> 
</div> 

我如何定義

div.embedded { } 
iframe.embedded { } 

使得嵌入的內容始終是完全可見，從不使用滾動條？

Answer 1

您可以使用庫http://davidjbradshaw.github.io/iframe-resizer/將iFrame的大小保持爲內容大小。

例子：http://davidjbradshaw.com/iframe-resizer/example/

Answer 2

這應做到：

/* Hide all scrollbars for the iframe */ 
iframe.embedded { overflow: hidden; } 

/* Hide all scrollbars for the div, but display the vertical scrollbar if content exceeds the height. */ 
div.embedded { overflow: hidden; overflow-y: auto; } 

這裏有一個possibly related question on Stack Overflow

如果你希望iFrame本身更高更長的含量增加，涉及Javascript和有人接聽in this Stack Overflow question。