iframe標籤在PC端的使用

隨着前端框架的崛起 各類組件化 模塊化開發 然而我發如今PC端要考慮兼容 ~~~~

本身琢磨着 在PC端怎麼吧一個頁面作成一個公共的部分  發現有個iframe標籤能夠在頁面中嵌套

雖然iframe能夠作成公共部分 但問題也是不少（PS：百度）

<iframe src="../home/home.html" id="cont" frameborder="0" scrolling="no" width="100%" height="100%;"></iframe>

<iframe src="../home/home.html" id="cont" frameborder="0" scrolling="no" width="100%" height="100%;"></iframe>

　用法就是這麼簡單  須要一個須要一個src頁面地址 frameborder設置iframe邊框爲空 scrolling清除滾動條 我這裏設置 嵌套進去的頁面寬高爲100%

這裏有個問題就是 高度若是設置爲100% 頁面就會出現2個滾動條 或者當你iframe裏面的高度大於屏幕高度 嵌套進去也會出現2條滾動條

我本身的解決辦法就是百度拉~~~~      記錄下代碼 之後用的到

下面貼下前端前輩的代碼 一共有3種解決辦法

<div>
  <iframe frameborder="no" src="https://www.oschina.net/">
  </iframe>
</div>

　　

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

div {
  height: 100%;
  /*第一種解決方案*/
  /*font-size:0;*/

}

iframe {
  width: 100%;
  height: 100%;
  /*第二種解決方案*/
  /*vertical-aglin:top;*/
  /*第三種解決方案*/
  /*display:block;*/
}

　　這裏我使用的是第一種方式 效果很是好 能解決問題！