Question

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

提前谢谢!! :)

以下是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>

Answer 1

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

阅读如何leverage browser caching（这会产生很大的不同），如果你optimised css delivery和js delivery

，则会获得奖励

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

希望这有帮助！

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

<script type='text/javascript'>
        $(function () {
            $('#searchInput').keyup(function () {
                if ($(this).val() > 0) {
                    //Check to see if there is any text entered
                    // If there is no text within the input ten disable the button
                    $('.enableOnInput').prop('disabled', true);
                } else {
                    //If there is text in the input, then enable the button
                    $('.enableOnInput').prop('disabled', false);
                }
            });
        }); 
    </script>

<input type='number' name='searchQuery' id='searchInput' />
            <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />

Working Fiddel is here

IFrame内容未显示完整高度

2 个答案: