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

时间 2019-12-02

原文原文链接

通常状况下咱们不多用到iframe（框架），但有些特殊的状况下咱们不得不使用iframe，那么或许或遇到嵌套内容不全屏，网页周围有边框，双滚动条等等状况，下面来讲一下处理技巧。css

全屏与边框处理：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"></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>

这样是否是没有了？ui

固然，还能够这样：this

<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>

-完-htm