我也遇到了同样的问题，但发现以下方法效果很好：
创建响应式YouTube嵌入的关键是填充和容器元素，这允许您为其给予固定的纵横比。您也可以将此技术用于大多数其他基于iframe的嵌入，如幻灯片。
以下是典型的YouTube嵌入代码，具有固定的宽度和高度：

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

如果我们能给予它100%的宽度就好了，但是因为高度是固定的，所以它就不起作用了。你需要做的是把它 Package 在一个容器中，如下所示（注意类名和删除的宽度和高度）：

<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%;以获得正确的高度。

这是我的纯CSS解决方案：）
添加，滚动yes到您的iframe。

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

诀窍：）

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

你不需要担心响应速度：）

@SweetSpice，用位置作为绝对值代替相对值，这样就行了

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

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，但它简单易用，代码可以修复您的问题。

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

您必须使用absolute位置沿着您想要的高度。在您的CSS中，请执行以下操作：

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

你应该注意到div标签的行为就像什么都没有一样，只是让你在里面放一些东西。这意味着如果你在div标签中插入一个有100行文本的段落，它会显示所有的文本，但是它的高度不会改变以包含所有的文本。
所以你必须使用一个CSS & HTML技巧来处理这个问题。这个技巧非常简单。你必须使用一个空div标签和*class=“clear”*，然后你必须将这个类添加到你的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;}

根据**this post**
您需要将!important css修改器添加到您的高度百分比中。
希望这对你有帮助。