iframe 100％高度问题

Question

在这个问题中，我希望iframe占据整个蓝框。

Fiddle

我给出宽度和高度100％但高度没有效果。任何修复？

Answer 1

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

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

Here 是小提琴。

Answer 2

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

Answer 3

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

Answer 4

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

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

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

fiddle