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

  

-完-

05-07 15:25