生活随笔
收集整理的這篇文章主要介紹了
CSS完美实现iframe高度自适应（支持跨域）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
https://blog.csdn.net/qq_32915337/article/details/79900222
Iframe的強(qiáng)大功能偶就不多說(shuō)了，它不但被開(kāi)發(fā)人員經(jīng)常運(yùn)用，而且黑客們也常常使用它，總之用過(guò)的人知道它的強(qiáng)大之處，但是Iframe有個(gè)致命的“BUG”就是iframe的高度無(wú)法自動(dòng)適應(yīng)，這一點(diǎn)讓很多人都頭疼萬(wàn)分。百度或是谷歌一下，確實(shí)很多解決方法，但嘗試一下，會(huì)發(fā)現(xiàn)問(wèn)題很多：瀏覽器兼容性差，不能自適應(yīng)，僅支持同域Iframe等諸多問(wèn)題，尤其是跨域Iframe高度自適應(yīng)問(wèn)題。網(wǎng)上根本找不到一種可行的方案（唯一有一種提到加入代理頁(yè)面的，經(jīng)過(guò)測(cè)試發(fā)現(xiàn)無(wú)用）。難道真的沒(méi)有一種可行的解決方案了嗎？ No，下面小鳴子和大家分享一種強(qiáng)大的方法，代碼如下： <html> <head> <style> body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;} </style> </head> <body> <iframe src='" http://www.baidu.com/' width='100%' height='100%' frameborder='0' name="_blank" id="_blank" ></iframe> </body> </html> 代碼強(qiáng)大之處： 1. 該方法完美兼容IE6，7，8 ，Fire fox,chrome，opera 等主流的瀏覽器； 2.同域，跨域皆支持； 3.不調(diào)用任何JS腳本； 注意三點(diǎn). 1. 文件開(kāi)頭不能是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 必須 是<html xmlns="http://www.w3.org/1999/xhtml">開(kāi)頭 2. body樣式中的 overflow: hidden; 絕對(duì)不對(duì)省略； 3.Iframe 中的 height='100%' 以及 滾動(dòng)條不能設(shè)為no(默認(rèn)是yes，不用設(shè)置即可) 好了，馬上試試吧。100%不會(huì)讓你失望。
轉(zhuǎn)載于:https://www.cnblogs.com/chaoyuehedy/p/9953735.html
總結(jié)
以上是生活随笔為你收集整理的CSS完美实现iframe高度自适应（支持跨域）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
