iframe 高度“100% - X 像素”

【问题标题】：iframe height "100% - X pixels"iframe 高度“100% - X 像素”
【发布时间】：2014-07-08 19:17:38
【问题描述】：

我想剪切我想在我的网站上包含的外部 iframe 的底部区域，在这个框架内有一些我无法修改的链接，如果我点击它们，我会转到另一个大小不同的页面来自原版。

我想做类似<iframe height:100%-20px /> 的事情（我知道没有这样的语法，但我的目标是重现它）

那么，有没有办法隐藏 iframe 底部的所有像素？

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

看看css中的calc()函数。

从IE10 开始可以使用（IE9 有点不稳定）。

你可以这样做：

iframe{
  height: calc(100% - 20px);
}

如果100% 的高度是100px，那么它会显示为80px（对不起，我的数学很糟糕）。

您可以通过查看此链接了解更多信息：Uses for Calc()

参考：CanIUse

【讨论】：

【解决方案2】：

这个怎么样：

    .outer {
        width:300px;
        height:290px;
        overflow:hidden;
    }

    <div class="outer">
        <iframe width="300" height="300"></iframe>
    </div>

如果这没有帮助，你有链接吗？

您可以同时使用外部 div 和 iframe 的 css 以及边框等，使其看起来更完美

【讨论】：

【解决方案3】：

这里有一个基于 BeatAlex 答案的现场演示：

Demo:http://jsfiddle.net/a7y7V/

【讨论】：