码迷,mamicode.com
首页 > 其他好文 > 详细

iframe框架嵌套页面(全屏,页面上下左右有空白,去双滚动条)

时间:2020-03-22 01:29:48      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:text   ack   win   frame   今天   一个   meta   css   set   

今天使用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

iframe框架嵌套页面(全屏,页面上下左右有空白,去双滚动条)

标签:text   ack   win   frame   今天   一个   meta   css   set   

原文地址:https://www.cnblogs.com/opsprobe/p/12543466.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!