CSS3：调整iframe的高度以适合其内容

我是CSS新手，因此解决此问题的方法可能很简单。我搜查了网页，但没有找到解决办法;尽管我认为这个问题相当普遍。CSS3：调整iframe的高度以适合其内容

我嵌入一个iframe到一个html文件，如：

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="main.css" /> 
    </head> 
    <body> 
    <p>Test</p> 
    <iframe class=result-frame src="/media/converted/1409487227933_testpage.html></iframe> 
    </body> 
</html>

现在，我想使IFRAME大如要附上它的所有内容。为此我的宽度设置为100％：

.result-frame { 
    width: 100%; 
}

但我不知道我怎么可以调整iframe的高度要足够大，以适应其内容，以便显示没有滚动条。

我已经看到了一些使用javascript的解决方案，但我只想坚持CSS/HTML。这甚至有可能吗？

Tobias

来源

2014-08-31 Tobias

不，那是不可能的，只有HTML和CSS。 – CBroe 2014-08-31 15:22:51

这对于CSS来说是不可能的。还有更多的iframe在不同的浏览器中以不同的方式工作。如果您在iPad上的Safari上看到它，您会看到所需的iframe，100％的高度。在那里有一个错误，人们将其封闭在一个容器中，并设置overflow-y: scroll;，但不在其他浏览器中。

你可以做的是通过JavaScript获取身体的高度，并为iframe设置相同的高度。下面是一段代码，将工作，我在这里使用jQuery，但你可以不用jQuery的：

$('#iframe-id').height($('#iframe-id').contents().find('body').height());

假设你的身体的高度是你iframe的整个高度，如果你使用的浮动元素和你没有清除iframe会产生问题。

您还可以使用html标签：

来源

2014-08-31 17:02:53

CSS3：调整iframe的高度以适合其内容

回答

相关问题