html 100％ - （一行）

Question

我正在尝试使用html将iframe的高度设置为100％（我已成功完成），但我还在顶部添加了一行额外的文本，因此它太高了〜（16px）滚动条）。有没有办法更改iframe以显示height="100%-16"？

之类的内容

Answer 1

使用calc()，您将使用以下内容：height: calc(100% - 16px);

不幸的是，此方法在浏览器中没有完整支持：reference here。

Example here

Answer 2

如果你试图让<iframe>填充整个窗口，除了带有文字的部分，请使用绝对定位而不是设置特定尺寸：

#my-frame {
    position: absolute;
    top: 2em; /* Whatever height you like */

    /* All the other ones are just distances from each side, not sizes */
    left: 0;
    right: 0;
    bottom: 0;
}

这适用于所有元素，并兼顾边框和填充。