iframe的自動高度

Question

我想從自己的服務器中嵌入/嵌入頁面並將高度設置為自動。 我進行了一些研究，結果發現我無法將高度設為自動。 我正在嘗試實現以下目標： http : //themeforest.net/item/king-sensitive-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

如果您在為主題林發布的鏈接上查看源代碼，則可以看到它們的操作方式。

  //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();
  });