Question

我是CSS的新手，因此这个问题的解决方案可能很简单。我在网上搜索过但没找到解决办法;尽管我认为这个问题相当普遍。

我将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。这甚至可能吗？

托拜厄斯

Answer 1

使用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代码：

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

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

1 个答案: