iframe 100％高度问题[重复]

Posted 2023-03-05

【中文标题】iframe 100％高度问题[重复]

【英文标题】：iframe 100% height issue [duplicate]

【发布时间】：2012-09-01 08:52:03

【问题描述】：

在本期中，我希望 iframe 占据整个蓝色框。

Fiddle

我已经给出了 100% 的宽度和高度，但高度没有效果。有什么办法吗？

【问题讨论】：

很奇怪，即使不需要更多解释，简短的回答也会被转换为评论......

查看这个答案：***.com/questions/5867985/iframe-auto-100-height

这个回答你的问题：***.com/questions/5867985/iframe-auto-100-height [1]：***.com/questions/5867985/iframe-auto-100-height

请查看：***.com/questions/5867985/iframe-auto-100-height

【参考方案1】：

将您的 display: table-row 更改为 display: block。另请注意，填充 div 的高度百分比仅适用于具有固定高度的父容器，可以是 px 或其他东西，也可以是百分比 %。 Here 是正确的小提琴。

否则，您可以尝试使用自己的布局。但是将 position: absolute;width:300px;height:250px; 添加到您的 div #two。如果你想使用百分比显示某个元素，那么它的父容器的属性（宽度和高度）应该被定义，只有这样，孩子才会伸展。

Here 是小提琴。

【讨论】：

我给display:table-row 的原因是蓝色框占据了其余部分。我刚刚在我的问题中添加了一个小提琴，即它非常基本。在我的项目中，wrapper 的高度等于浏览器的高度，蓝色框的高度等于浏览器的高度减去50px。现在，记住浏览器可以调整大小，所以蓝色的高度也会改变。

【参考方案2】：

您可以制作蓝色 div position: relative 并为 iframe 使用以下 css：

iframe 
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;


#two 
    position: relative;
    /* other CSS for #two */ 

fiddle

【讨论】：

您的解决方案将 iframe 绝对放在正文中。所以它不起作用。

@MotaBOS 如果您将iframe 所在的div 设置为position: relative，它将绝对设置为该div。所以这将是：#two position: relative; 。我会更新我的答案以使其更清楚。

【参考方案3】：

我在这个小提琴中稍微改变了你的代码。基本上你的蓝框 div 需要一个高度值。 Here's the fiddle

【讨论】：

它是动态的，它可以是任何的，所以我无法预先设置它。这就是我使用表格布局的原因；）

【参考方案4】：

在 css 中给 <div id="two"> 一个 height:100%。 iframe 需要填充父元素，但没有设置高度则不会。

【讨论】：

这是我唯一的解决方案。但它只在Firefox中工作。你检查铬了吗？ id="two" 占据了 100% 的高度。