HTML / CSS - 动态调整iframe大小而不使用javascript

Question

我使用javascript调整iframe相对于其内容的大小。 目标是显示内容并仅使用iframe的父级滚动。

的 HTML

<div id="content">
    <iframe name="tht" width="100%" src="path" onload='javascript:resizeIframe(this);'></iframe>
</div>

的 JAVASCRIPT

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

我想在不使用javascript（仅限css）的情况下拥有相同的行为。

我尝试使用height="100%"，但会出现iframe的滚动条。

编辑：我没有使用javascript解决方案的问题，但有时iframe调整大小需要很长时间，有时调整大小不起作用：没有显示。

Answer 1

<iframe src="http://www.example.com/" 
        class="iframe" 
        width="100%" 
        height="400px" 
        scrolling="no" 
        frameborder="0">
</iframe>

您可以在此处使用上面指定width="100%"，但高度将是固定的。

您可以尝试调整浏览器的大小。