iframe的自動高度

Question

我想從我自己的服務器中嵌入一個頁面，並將高度設置爲自動。我做了一些研究，結果證明我無法將高度設置爲自動。我想實現這樣的事情：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(); 
    });