iframe 100％高度问题

在这个问题在这里我想iframe占据整个蓝色框。iframe 100％高度问题

我已经给定宽度和高度100％，但是高度没有任何效果。任何修复？

2012-09-07 Ashwin

这很奇怪，一个简短的回答将被转换为发表意见，即使在不需要更多的解释... –

检查这个答案： http://stackoverflow.com/questions/5867985/iframe-auto- 100高度 – dawnsong

这一个回答你的问题： http://stackoverflow.com/questions/5867985/iframe-auto-100-height [1]：http://stackoverflow.com/questions/5867985/iframe -auto-100-height – dawnsong

给<div id="two"> a height:100% in css。 iframe需要填充父元素，但没有设置高度。

来源

2012-09-07 13:10:38 luke2012

这是我唯一的解决方案。但它只能在Firefox中使用。你有没有检查铬？ 'id =“two”'占据100％的身高。 – Ashwin

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

来源

2012-09-07 13:10:46 ThunderCat

我没有身高值。 – Ashwin

我知道。你需要设置一个。 – ThunderCat

它的动态，它可以是任何，所以我不能预先设定它。这就是我使用表格布局的原因;） – Ashwin

你可以把蓝色的div position: relative并使用以下CSS的iframe中：

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

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

fiddle

来源

2012-09-07 13:14:40

您的解决方案将iframe绝对置于正文。所以它不起作用。 – Ashwin

@MotaBOS如果你设置'iframe'到'position：relative'的div，它会将它设置为绝对的div。所以这将是：'#two {position：relative; }'。我会更新我的答案，使其更清楚。 –

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

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

Here是小提琴。

来源

2012-09-07 14:02:04

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

检查我的新答案 –

iframe 100％高度问题

回答

相关问题