Question

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

有人可以帮忙吗？

Answer 1

我遇到了同样的问题，但发现以下内容效果很好：

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

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

 <iframe width="560" height="315" 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%;以获得正确的高度。

Answer 2

这是我的PURE CSS解决方案：）

添加，将“是”滚动到您的iframe。

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

把戏：）

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

您不必担心响应速度：）

Answer 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，但是它很简单易用，可以解决您的问题。

Answer 4

@SweetSpice，使用position作为绝对代替relative。它会起作用

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

Answer 5

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

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

Answer 6

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

Answer 7

你应该注意 div 标签的行为就像什么都没有，只是让你把东西放进去。这意味着如果您在 div 标记中插入包含100行文字的段落，则会显示所有文字，但其高度不会更改为包含所有文字。

所以你必须使用CSS＆amp; 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文件中：

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

Answer 8

根据 this post

您需要将!important css修饰符添加到高度百分比。

希望这有帮助。

iFrame高度自动（CSS）

8 个答案: