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.scrollingElementscrollHeight 比获得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)的主要内容,如果未能解决你的问题,请参考以下文章

是否有有效的跨域 iframe 高度自动调整器?

水平居中 iframe 而不指定宽度/高度 CSS

当 iframe 内容的高度发生变化时自动调整 iframe 高度(同域)

iframe 自动调整其高度以适应内容高度

iframe 高度随引用的页面内容自动变化

怎样让iframe中的内容的宽度和高度改变后,dialog的宽高自适应?