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/
    博客版权:本文以学习、记录、分享为目的。欢迎大家转载,但务必注明原文地址,谢谢合作!
  • 相关阅读:
    ajax基础
    Linux经常使用命令大全
    基于Proxy思想的Android插件框架
    linux date -d 的一些使用方法
    Mac电脑没有声音,苹果电脑没有声音怎么办
    通用PE u盘装Ghost Win7系统
    通用PE u盘启动盘制作
    Qt for iOS,Qt 与Objective C混合编程
    苹果开发工具:Xcode和Interface Builder
    IOS 使用Interface Builder开发界面入门与技巧
  • 原文地址:https://www.cnblogs.com/colinliu/p/4817723.html
Copyright © 2011-2022 走看看