Question

我想从我自己的服务器中嵌入iframe /嵌入页面并将高度设置为auto。我做了一些研究，事实证明我无法将高度设为自动。我正在努力实现这样的目标：http://themeforest.net/item/king-responsive-multipurpose-wordpress-theme/full_screen_preview/12354623

这是我到目前为止所尝试的：

HTML：

<iframe class="forum-embed" src="forum/index.php"></iframe>

CSS：

.forum-embed {
    width: 100% !important;
    height: 100% !important;
    border: none;
}

PS：Themeforest也使用iframe。

Answer 1

您可以计算浏览器窗口/文档高度，然后设置iframe高度。

如果你正在使用jquery，你可以这样做：

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

如果你查看你为themeforest发布的链接上的来源，你可以看到他们是如何做到的..来自他们的来源......

  //function to fix height of iframe!
  var calcHeight = function() {
    var headerDimensions = $('.preview__header').height();
    $('.full-screen-preview__frame').height($(window).height() - headerDimensions);
  }

  $(document).ready(function() {
    calcHeight();
  });

  $(window).resize(function() {
    calcHeight();
  }).load(function() {
    calcHeight();
  });

iframe的自动高度

1 个答案: