html - 将浏览器从移动尺寸调整为 PC 时删除 iframe 下方的空白

Question

我在闪亮的应用程序中插入了一个 html iframe 文件，当用户将应用程序与手机连接时，我希望在不滚动移动设备大小的情况下显示此文件。我使用了一个 css 文件来控制 div 和 iframe 标签的大小，如下所示：

iframeCSS.css：

.intrinsic-container {
 overflow: hidden;
  padding-top: 0%;
  position: relative;
  padding-bottom: 100%;
  height: 2300px;
  
}

.intrinsic-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
  
}

如上面的代码所示，我将容器的高度增加到 2300px，以便在滚动关闭时完全显示 iframe。

应用程序中的 iframe 代码：

 tags$link( rel="stylesheet" ,href="iframeCSS.css"),
              
              tags$div(class="intrinsic-container",
                        tags$iframe(src="test.html",scrolling="no" , frameborder="0", "allowfullscreen"),  

              )

当以 PC 浏览器大小打开应用程序时，我的问题是 iframe 下方的空白区域。我怎样才能删除这个空白？但是当我将浏览器的大小减小到接近手机屏幕的大小时，没有空白，因此手机大小的浏览器没有问题。您可以查看移动和 PC 大小浏览器的屏幕截图：

电脑截图：

手机尺寸截图：

提前感谢您的帮助。

标签： htmlcssriframeshiny