首页 > 其他 > 详细

iframe框架嵌套技巧(全屏,去双滚动条)

时间:2015-09-17 23:15:57      阅读:662      评论:0      收藏:0      [点我收藏+]

一般情况下我们很少用到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>

  

-完-

iframe框架嵌套技巧(全屏,去双滚动条)

原文:http://www.cnblogs.com/colinliu/p/4817723.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!