iframe框架嵌套技巧（全屏，去双滚动条）

最新推荐文章于 2022-12-13 15:34:24 发布

weixin_34310785

最新推荐文章于 2022-12-13 15:34:24 发布

阅读量914

点赞数

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

版权

一般情况下我们很少用到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"  οnlοad="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>

-完-

转载于:https://www.cnblogs.com/colinliu/p/4817723.html

weixin_34310785

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe框架嵌套技巧（全屏，去双滚动条）

一般情况下我们很少用到iframe（框架），但有些特殊的情况下我们不得不使用iframe，那么或许或遇到嵌套内容不全屏，网页周围有边框，双滚动条等等情况，下面来说一下处理技巧。全屏与边框处理：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf...
复制链接

扫一扫