极客观点
项目管理
HarmonyOS
我的 iframe 有问题。我真的希望框架根据 iframe 中的内容自动调整高度。我真的很想在没有 javascript 的情况下通过 CSS 来做到这一点。但是，如果有的话，我也会使用 javascript。
我试过 height: 100%; 和 height: auto; 等。我只是不知道还能尝试什么！
这是我的 CSS。对于框架…
#frame {
position: relative;
overflow: hidden;
width: 860px;
height: 100%;
}
然后是框架的页面。
#wrap {
float: left;
position: absolute;
overflow: hidden;
width: 780px;
height: 100%;
text-align: justify;
font-size: 16px;
color: #6BA070;
letter-spacing: 3px;
}
该页面的编码看起来像这样……
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" �� "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navigation">
<a href="/" class="navigation">home</a>
<a href="about.php" class="navigation">about</a>
<a href="fanlisting.php" class="navigation">fanlisting</a>
<a href="reasons.php" class="navigation">100 reasons</a>
<a href="letter.php" class="navigation">letter</a>
</div>
<div id="content" >
<h1>Update Information</h1>
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
请注意，iframe 中的 URL 与将显示 iframe 的网站不同。但是，我可以访问这两个网站。
谁能帮忙？
原文由 SweetSpice 发布，翻译遵循 CC BY-SA 4.0 许可协议
我遇到了同样的问题，但发现以下方法效果很好：
创建响应式 YouTube 嵌入的关键是使用填充和容器元素，它允许您为其指定固定的纵横比。您还可以将此技术用于大多数其他基于 iframe 的嵌入，例如幻灯片。
这是典型的 YouTube 嵌入代码的样子，具有固定的宽度和高度：
如果我们能给它一个 100% 的宽度就好了，但它不会工作，因为高度保持固定。你需要做的是像这样将它包装在一个容器中（注意类名和删除宽度和高度）：
并使用以下 CSS：
这是我找到解决方案的页面：
https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
根据您的宽高比，您可能需要调整
padding-bottom: 56.25%;以获得正确的高度。