iframe用于填充不同平台上的剩余可见空间

Question

我之前已经问过类似的问题，但我的问题是如何在不同的平台上展示iframe。

我有一个标题<div>，然后是下面的iframe <div>。标题是一个徽标，因此设置为width=100%（顺便提一下，这个高度是静态的，所以我可以根据需要定义它。）

我的问题在于iframe;如何填充 可见 屏幕空间的剩余空间（即下方没有空格，也没有滚动条）？我可以找到标题的高度并对平均屏幕大小进行计算，但是我希望它比那更有条理，并且如果它基于％值以某种方式可以做到这一点然后我假设它会自动调整大小以在平板电脑等上给出相同的结果......任何想法都有吗？

Answer 1

你可以用％做 例如：假设标题的高度为150px

.your-iframe-div {
    height: calc(100% - 150px);
}

不确定mozilla现在是否支持此功能，但如果不支持：

.your-iframe-div {
    height: -moz-calc(100% - 15px);
}