html: iframe 缩放以适应除了顶行

Question

我正在尝试制作适合 iframe 的比例，但带有警告的顶行除外。例如:

<div style="text-align:center">Warning! blabla</div>
<iframe src="link" style="width:100%; height: 100%; transform-scale" frameborder = "0"></iframe>

<style>
    html, body, #wrapper{
        width:100%; height:100%; margin:0; padding:0; overflow:hidden;
    }
</style>

问题是，如果我这样做，iframe 底部的最后一行会被截断，并且无法滚动。

Answer 1

您可以使用 calc() 来计算 iframe 的高度。为此，您必须为警告设置高度:

<div style="text-align:center; height: 50px;">Warning! blabla</div>

然后你可以像这样设置你的 iframe 的高度:

<iframe src="link" style="width:100%; height: calc(100% - 50px); ... ></iframe>

在此处阅读有关 calc() 的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/calc