Fatal编程技术网
  • html/
  • Html iFrame高度自动（CSS）

Html iFrame高度自动（CSS）

html css iframe

Html iFrame高度自动（CSS）,html,css,iframe,height,Html,Css,Iframe,Height,我的iframe有问题。我真的希望帧根据iframe中的内容自动调整高度。我真的很想通过CSS而不是javascript来实现这一点。但是，如果我也有javascript，我将使用javascript 我试过身高：100%和高度：自动，等等。我只是不知道还有什么可以尝试 这是我的CSS。对于框架 #frame { position: relative; overflow: hidden; width: 860px; height: 100%; } 然后是框架的页面 #wrap

我的iframe有问题。我真的希望帧根据iframe中的内容自动调整高度。我真的很想通过CSS而不是javascript来实现这一点。但是，如果我也有javascript，我将使用javascript

我试过身高：100%和<代码>高度：自动，等等。我只是不知道还有什么可以尝试

这是我的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将显示的网站不同。但是，我可以访问这两个网站

有人能帮忙吗？

根据

您需要添加
！重要信息
css修改器，用于修改您的身高百分比

希望这有帮助。

您必须使用
绝对位置以及所需高度。
在CSS中，执行以下操作：


#id-of-iFrame {
    position: absolute;
    height: 100%;
}




将此添加到您的部分：


<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>




功能调整框架（obj）{
obj.style.height=obj.contentWindow.document.body.scrollHeight+'px'；
}


并将iframe更改为：


<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />






它被张贴了


不过，它确实使用javascript，但它是简单易用的代码，可以解决您的问题。
@SweetSpice，使用position作为绝对值代替relative。它会起作用的


#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}




更新信息
#支撑箱{
宽度：50%；
浮动：左；
显示：块；
高度：20rem；/*是可根据需要更改的支撑箱高度*/
背景色：#000；
}
#包装纸{
宽度：90%；
显示：块；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
背景：ddd；
保证金：自动；
高度：100px；/*此处的高度值是自动的，如果可以，您可以保留此值*/
}
#包装器iframe{
宽度：100%；
显示：块；
填充：10px；
保证金：自动；
}



我也有同样的问题，但发现以下几点非常有效：

创建响应性YouTube嵌入的关键是使用填充和容器元素，这允许您为其提供固定的纵横比。您还可以将此技术用于大多数其他基于iframe的嵌入，例如幻灯片

下面是典型的YouTube嵌入代码的样子，具有固定的宽度和高度：


 <iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen></iframe>



 <div class="container">
 <iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen class="video"></iframe>
 </div>


这是我在上面找到解决方案的页面：




根据您的纵横比，您可能需要调整
填充底部：56.25%以获得正确的高度。
您应该注意，div标记的行为与nothing类似，只允许您在其中放置一些东西。这意味着，如果在div标记中插入一个包含100行文本的段落，它将显示所有文本，但其高度不会改变以包含所有文本

因此，您必须使用CSS和HTML技巧来处理此问题。这个技巧很简单。您必须使用带有class=“clear”的空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解决方案：）

添加，将“是”滚动到iframe


<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>






诀窍：）



html，正文，iframe{height:100%；}
html{溢出：隐藏；}



您无需担心响应能力：）
这是行不通的。我想你一定要用JS。试试这个#帧宽：100%；最大宽度：860像素；没有<代码>，高度工作正常！重要信息
标记。但这并不能改变汽车的性能。哦，我想我误解了你的问题。你不是说高度：100%不能正常工作吗？你没有用“自动”就试过了吗@甜心，是的。我尝试了自动和100%。两者都是分开的。我还用
尝试了这两种方法！重要信息
标记和不标记。虽然此代码片段可以解决问题，但确实有助于提高文章质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性！谢谢你的宝贵建议。是的，你是对的“为将来的读者回答这个问题”。我将尝试微调我的回答我有一个类似的解决方案，用于iframe，源与主机位于同一个域中，但iframe主机和源来自不同的域，由于跨站点脚本限制，此解决方案可能不起作用。与
document.body
相比，我获得
document.scrollingElement
的
scrollHeight
的效果更好。这不起作用。iFrame有安全限制。高度：100%；-这意味着iframe的高度应该是iframe主机页面中包含元素宽度的100%（例如，不是iframe源页面内容高度的100%）。在任何情况下，我都尝试过这个方法，但它对我不起作用。对
div
height的这种解释是不对的-它描述了当元素包含浮动子元素（高度折叠）时会发生什么。在示例中（
div
包含100行文本），
div
将增加高度以包含所有文本。请注意，HTML5中不推荐使用此选项。这只会使高度相对于宽度保持静态，而不会使高度自动根据内容的高度进行调整。请注意，HTML5中不推荐使用此选项。@P.James:它确实扩展了iframe吗

    <!-- 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>



.clear{ display: block; clear: both;}



<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>



<style>
    html, body, iframe { height: 100%; }
    html { overflow: hidden; }
</style>