iframe高度宽度自适应

最新推荐文章于 2025-06-08 00:03:24 发布

Wenren_Huang

最新推荐文章于 2025-06-08 00:03:24 发布

阅读量1.4w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html iframe 自适应宽度高度

本文链接：https://blog.youkuaiyun.com/super__dreamer/article/details/52468942

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用iframe实现页面宽度和高度自适应的方法。通过简单的JavaScript代码设置iframe的高度为父元素的高度，使得iframe能够根据浏览器窗口大小变化而自动调整其尺寸。此方法适用于需要在不同设备上保持良好显示效果的网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>iframe宽度高度自适应</title>
</head>
<body id="body" height="100%">
<script type="text/javascript">
    //设置body高度为浏览器高度，当然也可以不设置   
    document.getElementsByTagName('body')[0].style.height = window.innerHeight+'px';
</script>
    <!--iframe的高度设置为父元素的高度即可实现高度自适应-->
    <!--这边以body为父元素，当然也可以以div之类的元素为父元素-->
    <iframe name="Info1" id="Info1" src="http://www.baidu.com" onload="this.height=body.offsetHeight" width="100%" scrolling="true" frameborder="0"></iframe>
</body>
</html>