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

最新推荐文章于 2024-08-17 20:39:04 发布

转载最新推荐文章于 2024-08-17 20:39:04 发布 · 1k 阅读

CC 4.0 BY-SA版权

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

本文介绍如何通过HTML和CSS代码优化iframe的使用，解决其嵌套内容不全屏、网页周围有边框以及出现双滚动条的问题。通过设置iframe的高度和宽度为100%，并利用CSS技巧如隐藏滚动条，可以实现全屏显示且消除多余边框。此外，通过调整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>

-完-

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