gpt4 book ai didi

html - CSS3 : Adjust height of iframe to fit its content

转载 作者:行者123 更新时间:2023-11-28 09:34:30 25 4
gpt4 key购买 nike

我是 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。这可能吗?

托比亚斯

最佳答案

这是 CSS 做不到的。还有更多,iframe 在不同的浏览器中会以不同的方式工作。如果您在 iPad 的 Safari 上看到它,您将看到您想要的 iframe,即 100% 高度。那里有一个错误,人们解决了将它封装在一个容器中并设置 overflow-y: scroll; 但在其他浏览器中没有。

您可以做的是通过 javascript 获取 body 的高度并为 iframe 设置相同的高度。这是一段可以工作的代码,我在这里使用 jQuery,但你可以在没有 jQuery 的情况下完成它:

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

假设您 body 的高度是您的 iframe 的完整高度,如果您使用了 float 元素并且您没有清除 iframe,您将会遇到问题。

你也可以使用html标签:

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

关于html - CSS3 : Adjust height of iframe to fit its content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25593347/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com