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