html - iframe 100% 高度问题

Question

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

小提琴

我已经给了宽度和高度 100% 但高度没有效果。有什么修复吗？

Answer 1

将您的更改display: table-row为display: block. 另请注意，填充 div 的高度百分比仅适用于具有固定高度的父容器，无论是 bypx还是其他东西，或者是 percent %。这是更正的小提琴。

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

这是小提琴。

Answer 2

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

Answer 3

我在这个小提琴中稍微改变了你的代码。基本上你的蓝盒 div 需要一个高度值。这是小提琴

Answer 4

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

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

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

小提琴