如何使iframe填充由距邊緣的距離定義的區域？

我有一個iframe，我想填充底部，右側，左側和頂部CSS樣式指定的頁面上的所有區域。然而，當我這樣做的方法，我預期的那樣工作，這不：如何使iframe填充由距邊緣的距離定義的區域？

HTML：

<iframe id="example_frame" src="http://example.com"></iframe> CSS：

#example_frame { 
    position: absolute; 
    top: 1em; 
    left: 1em; 
    right: 1em; 
    bottom: 1em; 
}

這將導致一個小盒子與網頁約100×100像素

來源

2009-07-23 Ed L

我想是因爲iframes是replaced elements ，您不能只設置top,right,bottom和left的任意組合。你應該能夠嗎？絕對。但你不能。相反，您可以設置一個垂直屬性（top或bottom），一個水平屬性（left或right），然後將height和width設置爲100%。

要達到你要爲那裏的周圍的iframe一個1em空間的效果，只是像一個div另一個非替換元素包裹iframe。

<div class="abs-frame-container"> 
    <iframe id="example_frame" src="http://example.com"></iframe> 
</div>

產生你要去該效果的CSS是：

.abs-frame-container { 
    position: absolute; 
    top: 1em; 
    left: 1em; 
    right: 1em; 
    bottom: 1em; 
} 

.abs-frame-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0; 
    height: 100%; 
    width: 100%; 
}

也看出來其中CSS設置border: 0不會在所有的瀏覽器的問題。

來源

2012-03-05 21:29:39

我不確定，但是您是否必須將iframe定義爲position: absolute to be able to set a size in terms of the browser window;？我可以想象它默認爲display:block？

根據OP的意見編輯。

您使用的是什麼文檔類型？問題是否出現在您可以測試的所有瀏覽器/平臺上？你是否成功地調用了樣式表？您是使用內聯樣式，頭部樣式還是外部表格？

如果您不使用內聯樣式，請嘗試使用它們，稍等片刻，看看它們是否以內聯方式工作。

來源

2009-07-23 20:33:29

我忘了在例子 – 2009-07-23 20:38:38

絕對定位一次只能使用一個x座標和一個y座標。我猜測瀏覽器忽略了一組座標。

而且，由於你沒有指定一個與或iframe的高度，它默認爲100×100

試着這麼做：

#example_frame { 
    position: absolute; 
    top: 5%; 
    left: 5%; 
    width: 90%; 
    height: 90%; 
}

來源

2009-07-23 21:22:04 skybondsor

我已經爲div工作的代碼，iframe有什麼不同？ – 2009-07-23 21:25:22

1）iframe默認是內聯元素; 2）即使顯示設置爲阻止，內聯框架也需要指定寬度和高度。即，「塊」實際上就像iframes的「內聯塊」一樣。「 – skybondsor 2009-07-23 21:41:06

」絕對位置一次只能處理一個x座標和一個y座標。「雖然提出的解決方案是正確的，但這是錯誤的，我認爲這個問題與iframe被替換的元素有關。 – 2012-03-05 21:11:28

如何使iframe填充由距邊緣的距離定義的區域？

回答

相關問題