iframe的父母內部沒有身高和底部填充的零高度

我使用經典的響應式設計技巧，將基於百分比的padding-bottom和零高度應用於元素，以使其保持一定的寬高比。此元素內部是一個高度爲100％的iframe。iframe的父母內部沒有身高和底部填充的零高度

這可以在Chrome中使用，但Firefox和IE不顯示iframe，就好像它沒有高度一樣。我曾嘗試使用box-sizing: content-box作爲IE的解決方法，但它什麼也沒做。

我怎樣才能讓iframe的行爲像在Chrome中的其他瀏覽器？

2014-05-23 Kloar

你需要做的就是在你的.wrapper

.wrapper { 
    position:relative; 
    height: 0; 
    width: 100%; 
    padding-bottom: 56.25%; 
} 
.frame { 
    position:absolute; 
    top:0; 
    right:0; 
    left:0; 
    bottom:0; 
    width: 100%; 
    height: 100%; 
}

看一看這個DEMO

另一位置的iframe使用position:absolute;與position:relative;：

如果您打算在整個文檔中定期做這樣的事情，我會建議添加一個內部的div，這是否相同的功能，並留下您iframe沒有絕對定位

HTML

<div class="wrapper"> 
    <div class="abs-inner"> 
     <iframe border="0" scrolling="no" class="frame" src="http://images.fineartamerica.com/images-medium-large/7-abstract-background-les-cunliffe.jpg"></iframe> 
    </div> 
</div>

CSS

.wrapper { 
    position:relative; 
    height: 0; 
    width: 100%; 
    padding-bottom: 56.25%; 
} 
.abs-inner{ 
    position:absolue; 
    top:0; 
    right:0; 
    left:0; 
    bottom:0; 
} 
.frame { 
    width: 100%; 
    height: 100%; 
}

像這樣的事情DEMO

來源

2014-05-26 08:35:56 haxxxton

的height: 100%;表示元素的高度與其母體的高度匹配，即0px。您可以使用相對+絕對定位，實現所期望的結果，即高度與元素的高度加上填充匹配：

.wrapper { 
    width: 100%; 
    padding-bottom: 56.25%; 
    position: relative; 
} 
.frame { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
}

Demo here

注：像素完美的結果，您可能需要零出iframe上的marginwidth,marginheight和frameborder屬性。

來源

2014-05-26 08:55:10

iframe的父母內部沒有身高和底部填充的零高度

回答

相關問題