DIV 包含的 IFRAME 不需要滚动的样式

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

应该这样做：

/* 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。

Answer 2

您可以使用库 http://davidjbradshaw.github.io/iframe-resizer/ 来保持 iFrame 的大小适合内容。

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

DIV 包含的 IFRAME 不需要滚动的样式

DIV styling such that contained IFRAME doesn't need to scroll

html

css

iframe

overflow