iFrame 高度自动 (CSS)
Posted
技术标签:
【中文标题】iFrame 高度自动 (CSS)【英文标题】：iFrame Height Auto (CSS) 【发布时间】：2014-08-01 05:11:42 【问题描述】：我的 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 的网站不同。但是，我可以访问这两个网站。
谁能帮忙？
【问题讨论】：
那行不通。我认为您将不得不以某种方式使用 JS。 ***.com/questions/9975810/… 在#frame width:100% 上试试这个；最大宽度：860px; 【参考方案1】：根据this post
您需要将!important css 修饰符添加到您的身高百分比。
希望这会有所帮助。
【讨论】：
没有!important 标签的高度工作得很好。但这不会改变汽车。
哦，我想我误解了你的问题。你不是说 height:100% 工作不正常吗？您是否尝试过完全不使用“自动”？ @SweetSpice
是的。我试过自动和 100%。两者分开。我还尝试了使用!important 标签和没有标签。【参考方案2】：
您必须使用absolute 位置以及所需的高度。
在您的 CSS 中，执行以下操作：
#id-of-iFrame
position: absolute;
height: 100%;
【讨论】：
高度：100%； — 这表示 iframe 的高度应该是 iframe 主机页面中包含元素宽度的 100%（例如，不是 iframe 源页面内容高度的 100%）。无论如何，我已经尝试过了，但它对我不起作用。 @MatthewSlyman 100% 宽度？假设你的意思是“身高” 不，百分比不被视为根或父对象中相同变量或类似定向维度的百分比（如果需要澄清，请检查）...而是有效地处理它们（不直观）作为度量单位，由容器的宽度 (?) 除以 100 定义。如果要通过父对象的高度定义任何尺寸（高度或宽度或其他任何值），则需要使用例如“vh " 单位。 @MatthewSlyman 我认为这不是真的：codepen.io/Alynva/pen/OJjpwPy【参考方案3】：hjpotter92
将此添加到您的部分：
<script> function resizeIframe(obj) obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; </script>并将您的 iframe 更改为：
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
发帖Here
不过它确实使用了 javascript，但它的代码简单易用，可以解决您的问题。
【讨论】：
我有一个类似的解决方案适用于源与主机在同一域内的 iframe，但如果 iframe 主机和源来自不同的域，由于跨站点脚本限制，此解决方案可能不起作用. 获得document.scrollingElement 的scrollHeight 比获得document.body 的结果更好。
这不起作用。 iFrame 存在安全限制。【参考方案4】：
@SweetSpice，使用绝对位置代替相对位置。它会工作
#frame
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
【讨论】：
你应该添加 position:relative to parent【参考方案5】： <div id="content" >
<h1>Update Information</h1>
<div id="support-box">
<div id="wrapper">
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</div>
#support-box
width: 50%;
float: left;
display: block;
height: 20rem; /* is support box height you can change as per your requirement*/
background-color:#000;
#wrapper
width: 90%;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
background:#ddd;
margin:auto;
height:100px; /* here the height values are automatic you can leave this if you can*/
#wrapper iframe
width: 100%;
display: block;
padding:10px;
margin:auto;
https://jsfiddle.net/umd2ahce/1/
【讨论】：
虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！ 感谢您的宝贵建议。是的，您是对的“将来为读者回答问题”。我会尝试微调我的答案【参考方案6】：我遇到了同样的问题，但发现以下效果很好：
创建响应式 YouTube 嵌入的关键是使用填充和容器元素，它允许您为其提供固定的纵横比。您还可以将此技术用于大多数其他基于 iframe 的嵌入，例如幻灯片。
这是典型的 YouTube 嵌入代码的外观，具有固定的宽度和高度：
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>
如果我们可以给它一个 100% 的宽度，那就太好了，但它不会工作，因为高度保持固定。你需要做的就是将它包装在一个容器中（注意类名和宽度和高度的删除）：
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
并使用以下 CSS：
.container
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
.video
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
这是我找到解决方案的页面：
https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
根据您的纵横比，您可能需要调整 padding-bottom: 56.25%; 以获取正确的高度。
【讨论】：
请注意 这只是使高度相对于宽度保持静态，不会自动调整高度以适应内容的高度。 这么多的赞成票，但这并不能满足 op 的要求。【参考方案7】：你应该注意到 div 标签的行为就像什么都没有，只是让你在里面放一些东西。这意味着如果您在 div 标记中插入一个包含 100 行文本的段落，它会显示所有文本，但其高度不会更改为包含所有文本。
所以你必须使用 CSS & HTML 技巧来处理这个问题。这个技巧非常简单。您必须使用 class="clear" 和 empty div 标签，然后您必须将此类添加到您的 CSS。另请注意，您的 CSS 文件中有 #wrap，但您没有任何带有此 ID 的标签。总之，您必须将代码更改为如下所示：
HTML 代码：
<!-- Change "id" from "container" to "wrap" -->
<div id="wrap">
<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>
<!-- Add this line -->
<div class="clear"></div>
</div>
<div id="footer">
</div>
<!-- Add this line -->
<div class="clear"></div>
</div>
并将这一行添加到您的 CSS 文件中：
.clear display: block; clear: both;
【讨论】：
这种对div 高度的解释是不正确的——它描述了当一个元素包含浮动子元素（高度崩溃）时会发生什么。在示例中（div 包含 100 行文本），div 将增加高度以包含所有文本。【参考方案8】：
这是我的纯 CSS 解决方案 :)
添加，滚动是到您的 iframe。
<iframe src="your iframe link" scrolling="yes" frameborder="0"></iframe>
诀窍:)
<style>
html, body, iframe height: 100%;
html overflow: hidden;
</style>
您无需担心响应能力 :)
【讨论】：
请注意 @P.James：它实际上为你扩展了 iframe 吗？我会感到震惊... 在我对此发表评论时，这实际上是有效的。或者这取决于你的结构。但这对我有用。以上是关于iFrame 高度自动 (CSS)的主要内容，如果未能解决你的问题，请参考以下文章