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

Answer 2

使用以下样式：

iframe {
   position: fixed;
   top: 50px;
   left: 0;
   right: 0;
   bottom: 0;
}

然后使用javascript，您可以根据您需要的位置更改“顶部”样式。

html：iframe缩放以适合除顶线之外

2 个答案: