zoukankan      html  css  js  c++  java
  • iframe框架嵌套技巧(全屏,去双滚动条)

    一般情况下我们很少用到iframe(框架),但有些特殊的情况下我们不得不使用iframe,那么或许或遇到嵌套内容不全屏,网页周围有边框,双滚动条等等情况,下面来说一下处理技巧。

    全屏与边框处理:

    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Colin-iframe Test</title>
    </head>
    <body>  
    <iframe src="https://www.baidu.com" height="100%" width="100%" id="frame_full" frameborder="0" scrolling="auto"></iframe>
    </body>
    </html>
    

      

    基本可以满足需求了吧,或许你细心使用会发觉还是不够完美,因为过高的页面会有双滚动条,怎么办?

    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Colin-iframe Test</title>
    </head>
    <body>  
    <iframe src="https://www.baidu.com" height="100%" width="100%" id="frame_full" frameborder="0" scrolling="auto"  onload="this.style.height=document.body.clientHeight-50"></iframe>
    </body>
    </html>
    

      

    这样是不是没有了?

    当然,还可以这样:

    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Colin-iframe Test</title>
    <style type="text/css">
        html{overflow:hidden;}
    </style>
    </head>
    <body>  
    <iframe src="https://www.baidu.com" height="100%" width="100%" id="frame_full" frameborder="0" scrolling="auto" ></iframe>
    </body>
    </html>
    

      

    -完-

    博客地址:http://www.cnblogs.com/colinliu/
    博客版权:本文以学习、记录、分享为目的。欢迎大家转载,但务必注明原文地址,谢谢合作!
  • 相关阅读:
    request
    href="#"
    可展开收起的客服导航。
    JS添加父节点的方法。
    精简漂亮的导航浮动菜单显示特效演示
    竖排导航
    仿新浪微博
    鼠标滑过改变文字
    滚动函数
    一些常用的兼容函数。
  • 原文地址:https://www.cnblogs.com/colinliu/p/4817723.html
Copyright © 2011-2022 走看看