纯CSS实现iframe高度自适应,完美兼容各种浏览器,同域异域
生活随笔
收集整理的這篇文章主要介紹了
纯CSS实现iframe高度自适应,完美兼容各种浏览器,同域异域
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?? ? ?最近做項目需要引用外部頁面,在網上找的許多關于iframe高度自適應的文章,有的只能同域訪問,有的可以實現異域,但是需要異域是可編輯的。對于我這種情況都不適用。而且,這些方法都需要用js。
?? ? ?后來,我發現校內網上面的分享外部鏈接的情況和我的情況很類似,便鉆研一下,看它是怎么實現的。哈哈,給我發現了。校內網沒有用到任何JS,只需要純CSS便完成這個功能。
?? ?內容非常簡單,直接看代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<style type="text/css">
html, body, table, tbody, tr, td {
width:100%;
height:100%;
overflow:hidden;
}
iframe {
width:100%;
height:100%;
border:none;
}
</style>
</head>
<body>
<table>
<tbody>
<tr style="height:40px;">
<td style="height:40px;background-color:red">
Header
</td>
</tr>
<tr>
<td>
<iframe src="http://www.douban.com">
</iframe>
</td>
</tr>
</tbody>
</table>
</body>
</html>
轉載于:https://www.cnblogs.com/teddyathtml5/archive/2011/05/25/2057372.html
總結
以上是生活随笔為你收集整理的纯CSS实现iframe高度自适应,完美兼容各种浏览器,同域异域的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: .net读写配置文件
- 下一篇: Visual C++位图操作(1)