小編給大家分享一下CSS怎么讓iframe實(shí)現(xiàn)自適應(yīng)高度的效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有南和免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

iframe自適應(yīng)高度

出于演示目的，本文將使用視頻嵌入我們的iframe。首先，訪問視頻網(wǎng)址，點(diǎn)擊視頻下的“分享”，然后點(diǎn)擊“嵌入”，具體代碼如下：

frameborder="0"gesture="media"allow="encrypted-media"allowfullscreen>

接下來，我們需要?jiǎng)h除width=“560”height=“315”，因?yàn)檫@里是設(shè)置iframe的大小。由于我們需要自己設(shè)置尺寸，因此我們不需要這樣做。

使用CSS

之后，我們需要將iframe放在另一個(gè)html元素的

使用以下樣式定義包裝類：

.resp-container{

position:relative;

overflow:hidden;

padding-top:56.25%;

}

position:relative和iframe的位置在這里非常重要。position:relative以便稍后我們可以將iframe與包裝元素相關(guān)聯(lián)。這是因?yàn)樵贑SS中，position:absolute基于最接近的非靜態(tài)父元素定位元素。

overflow:hidden是否隱藏任何可能放在容器外面的元素。

padding-top:56.25%這就是關(guān)鍵所在。在CSS中，padding-top屬性可以設(shè)置百分比，這使我們的iframe保持正確的比例。通過使用百分比，它將根據(jù)元素的寬度計(jì)算要使用的填充。在我們的示例中，我們希望保持56.26％的比率，也可以使用其他比率。

按如下方式定義iframe類：

.resp-iframe{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:0;

}

position:absolute;這將為iframe提供相對(duì)于包裝器的位置，并將其放置在包裝器的填充上。

top:0并left:0用于將iframe定位在容器的中心。

width:100%并且height:100%使IFRAME采取所有包裝的空間。

完成后，你應(yīng)該得到一個(gè)響應(yīng)的iframe。

總結(jié)：在本文中，我們已經(jīng)看到了可以讓iframe實(shí)現(xiàn)自適應(yīng)高度的技巧。正如您所看到的，它實(shí)際上非常簡(jiǎn)單，希望這篇文章可以給你節(jié)省數(shù)小時(shí)的嘗試時(shí)間。

看完了這篇文章，相信你對(duì)“CSS怎么讓iframe實(shí)現(xiàn)自適應(yīng)高度的效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！