有没有办法让 iframe 全屏显示？答案

【问题标题】：Is there a way to have an iframe in fullscreen?有没有办法让 iframe 全屏显示？
【发布时间】：2019-01-06 17:12:20
【问题描述】：

我想将 iframe 放在我的页面上，并在 iframe 顶部放置另一个 div 以返回特定页面，但是，我似乎无法让 iframe 全屏显示（高度：100% 和宽度： 100%）。有什么办法可以让 iframe 全屏显示？

我已经尝试使用 jquery 将高度设置为窗口高度，但是它不起作用。

<style>    
    iframe {
      height:100%;
      width:100%;
    }

    .goback {
      width:100%;
      background-color:transparent;
      transition:.5s;
      position: absolute;
      z-index:3;
    }

    .goback img {
      padding:5px;
    }

    .goback:hover {
      background-color:white;
    }
</style>
<body>
    <div class="goback">

        <img src="../../assets/goback.png" alt="goback" height="50px" width="50px" />

    </div>

    <iframe src="https://music.youtube.com/"></iframe>

</body>

【问题讨论】：

标签： html css iframe fullscreen

【解决方案1】：

你应该修改你的css（设置body margin为0，定位iframe绝对并且设置border为0）

例子：

body {
  margin: 0;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width:100%;
  border: 0;
}

【讨论】：

【解决方案2】：

使用视口宽度和高度而不是百分比

iframe {
  height:100vh;
  width:100vw;
 }

【讨论】：

【解决方案3】：

使用

 宽度:100%;高度：100vh；

的 iframe。

【讨论】：