IFrame 内容未显示全高答案

【问题标题】：IFrame content not displaying full heightIFrame 内容未显示全高
【发布时间】：2017-10-09 14:11:09
【问题描述】：

我的主站点上有一个响应式 IFrame，无法让内容显示 100% 高度。 Screen Shot。里面的图像应该是一个矩形。宽度显示正常，但 IFrame 要么将图像压缩到较短的长度，或者它可能只显示高度的较小正方形部分？请告知我做错了什么，或者可以做什么，所以内容显示 IFRAME 的 100% 的宽度和 100% 的高度

提前谢谢你！！ :)

这是 IFrame 页面的链接：https://www.pravacanamats.com/custom-yoga-mat-designer/

这里还有当前使用的代码 html 和 CSS：

    <div class="iframe-container iframe-container-for-wxh-500x350" style="-webkit-overflow-scrolling: touch; overflow: auto;">
 <iframe src="https://www.beehoneyom.com/product/yoga-mat/"> <iframe src= marginheight="1" height="1"> 
<p style="font-size: 110%;"><em><strong>IFRAME: </strong> There is iframe content being displayed here but your browser version does not support iframes.</em>Please update your browser to its most recent version and try again.</p> </iframe> 
</div>
<iframe width="100%" height="768" src="https://www.beehoneyom.com/product/yoga-mat/" frameborder="0" allowfullscreen></iframe>

【问题讨论】：

这里也是 CSS 代码： .iframe-container-for-wxh-500x350 { padding: 25px 25px 70% 25px; /* padding-bottom = h/w as a % / } .iframe-container iframe { position: absolute;最高：50；左：0；边距：0；填充：0；宽度：100%；高度：100%；边框：无； / 将以下样式（溢出和滚动处理所必需）放在 iframe 周围的 div 容器中，因为在 CSS 中不稳定 -webkit-overflow-scrolling: touch;溢出：自动； */ }
您的网站需要很长时间才能加载！
如果你看到这里，那是一团糟。 > > src="beehoneyom.com/product/yoga-mat" frameborder="0" allowfullscreen>
正如@techLove 所说，您将 iframe 高度限制为 768 像素。将其更改为 height="100%"。
jsfiddle.net/RachGal/02m1x2e6 这可行，但您应该处理加载时间 - 这需要很长时间..人们会从您的网站反弹..添加文本/图像等较小是否有问题？您无法从 iframe 端控制它，因为它是其他网站的一部分..

标签： html css iframe

【解决方案1】：

我制作了一个fiddle，其中包含一些改进、更正的 html 和 css。但是，您的网站仍然需要很长时间才能加载，并且您可以做一些简单的事情。 Minify your own HTML、javscript 和 css，您服务器上的文件。

阅读如何leverage browser caching（这有很大的不同），如果你optimised css delivery 和js delivery 将获得奖励

我看到你启用了压缩，因为我发布了慢加载评论，但它在PageSpeedinsights 上的桌面和移动设备上的排名仍然为 0/100。这是一个非常方便的工具，用于测试您的网站速度。也有助于衡量跳出率。

希望这会有所帮助！

#makemat {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

.iframe-container-for-wxh-500x350 {
  padding: 25px 25px 70% 25px;
  /* padding-bottom = h/w as a % */
}

.iframe-container iframe {
  position: absolute;
  top: 50;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: none;
}

<div id="makemat" class="iframe-container iframe-container-for-wxh-500x350">
  <iframe src="https://www.beehoneyom.com/product/yoga-mat/" marginheight="1" height="1" frameborder="0" allowfullscreen>  </iframe>
  <p style="font-size: 110%;"><em><strong>IFRAME: </strong> There is iframe content being displayed here but your browser version does not support iframes.</em>Please update your browser to its most recent version and try again.</p>

</div>

【讨论】：

顺便说一句，当您回复评论时，当您键入“@”符号和第一个字母时，您正在回复的用户名应该会弹出。不要留下空白，否则它不会进入用户的收件箱。偶然我看到了你的最后回复（我回到了这个问题） - 例如，我会是@RachelGallen（名字和姓氏之间或@符号之后没有间隔）

【解决方案2】：

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

Working Fiddel is here

【讨论】：