html 100%-（一行）

Posted 2023-03-06

【中文标题】html 100%-（一行）

【英文标题】：html 100%- (one line)

【发布时间】：2014-02-16 01:22:49

【问题描述】：

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

【参考方案1】：

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

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

Example here

【讨论】：

这只是将我的 iframe 压缩得比原来要小。这是我正在尝试更改的网站：calendar.deltamu.com（我已将其更改回来，但您可以查看源代码，自己尝试一下，看看它是如何工作的不太正确）

@derekantrican 我做了一些调整，它在您的网站上运行。我建议查看我发布的示例

抱歉，你能解释一下你是如何让它工作的吗？ （我对 HTML 还很陌生）。我尝试用html: calc(100% - 16px); 替换html= "100"，但它又把它压扁了。另外，我看到您使用的是div 而不是<div>。那是一种不同的语言吗？

@derekantrican 是的，这就是 CSS。您可以通过样式属性添加它：style="height: calc(100% - 16px);"。这很容易奏效；但是该元素将定位在顶部，因此您需要像我在示例中所做的那样使用定位并将其定位到父元素的底部。

【参考方案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;

这适用于所有元素，并考虑到边框和填充。

【讨论】：

这会根据不同尺寸的分辨率显示器而改变吗？ （这是我使用 100% 而不是绝对尺寸的主要原因）

@derekantrican：是的。 “绝对定位”与“绝对尺寸”不同。