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％高度問題

回答

相關問題