今天使用iframe框架,遇到了嵌套页面内容不全屏,页面上下左右有空白,出现双滚动条等情况,通过网上查阅,最终解决,在此做个记录。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的创意-我的创意记录</title> <style type="text/css"> html{ /* 解决页面会出现双滚动条问题。overflow: hidden; 溢出隐藏,给一个元素中设置overflow: hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。 */ overflow: hidden; } body{ /* 解决页面上下左右会出现空白问题。让外框的外边距和内边距都为0 */ margin: 0; padding: 0; } #iframepage{ width: 100%; } </style> </head> <body> <iframe src="嵌入的页面链接" id="iframepage" scrolling="auto" onload="changeFrameHeight()" frameborder="0"></iframe> <!-- 以下JS部分是让iframe自适应高度,兼容多种浏览器 --> <script type="text/javascript"> function changeFrameHeight(){ var ifm= document.getElementById("iframepage"); ifm.height=document.documentElement.clientHeight; } window.onresize=function(){ changeFrameHeight(); } </script> </body> </html>
参考文章:
(1)https://www.bbsmax.com/A/1O5E8vRbJ7
(2)https://blog.csdn.net/alex8046/article/details/51456131
原文地址:https://www.cnblogs.com/opsprobe/p/12543466.html
时间: 2024-11-07 08:42:18