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