iframe高度宽度自适应

最新推荐文章于 2025-09-08 10:51:01 发布

原创最新推荐文章于 2025-09-08 10:51:01 发布 · 1.4w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #iframe #自适应宽度高度

HTML 专栏收录该内容

1 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

<!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>