Question

在无边框/无滚动iFrame上使用max-height的任何想法，如果它最终太高，浏览器不会渲染一个巨大的黑色区域来填充iFrame的其余部分？

我已尝试设置height="100%"和max-height="xx"，但这似乎不起作用。

非常感谢！

Answer 1

您使用height="100%"运算符使用=表示您正在尝试使用内联属性。这个可以工作，但通常使用绝对测量更好（所以700px而不是百分比）。对于样式表中的除之外的任何元素，max-height不是有效属性，所以我建议您使用CSS ：

iframe {
    min-height: 200px; /* or whatever */
    max-height: 500px; /* or whatever */
}

如果必须，您也可以使用内联样式，这样会产生<iframe src="..." style="min-height: 200px; max-height: 500px;">

此外，当你可以使用百分比时，为了给max-height: 80%，这似乎要求父元素有自己定义的height（我是不确定它是所有浏览器，还是只有一两个，但无论哪种方式，似乎都是合理的期望，以便浏览器可以计算出80％的实际）。

Answer 2

一个好的基于 JavaScript 的答案似乎是第一个解决方案：

https://www.geeksforgeeks.org/how-to-adjust-the-width-and-height-of-iframe-to-fit-with-content-in-it/

调整 iframe 的大小以适应内容。我发现您必须手动为高度添加一些额外的东西……算一下，但似乎可行。

以下是基于该解决方案对我有用的完整标记和 JS：

    <iframe src="/app/index.html" style="width:100%;" frameborder="0" id="Iframe">
        Oops, your browser doesn't get Iframes. Click <a href="/app/index.html">Here</a> to proceed.
    </iframe>
    <script>
    //  Adjust the iframe height to exactly as much as required by the content
    var frame = document.getElementById("Iframe");
    frame.onload = function() {
      // add extra 50 pixels - in reality need just a bit more 
      frame.style.height = (50+frame.contentWindow.document.body.scrollHeight) + 'px';
      // not sure if this is really required. 
      // set the width of the iframe as the width of the iframe content
      frame.style.width = frame.contentWindow.document.body.scrollWidth+'px';  
    }
    </script>

iFrame和“max-height”

2 个答案: