首先，我所做的一切都在同一个域上。我很幸运，我不需要处理原产地问题。第二，我可以接触到一切。
目前，我们正在通过wordpress通过响应式HTML5播放我们的电子学习模块-Articulate和Captivate。
<iframe src="https://fxxx.com/tech/2e8615a0-0782-11e5-aaac-06beb8253f3d/multiscreen.html" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>
此代码起作用，并允许我们在用户浏览器中相应地显示内容。请注意，在这种情况下，我正在对Captivate文件进行iframe，并注意Captivate正在对multiscreen.html中的实际内容进行iframe。因此，我们有一个嵌套的iframe。
我被要求从全页响应设计转移到添加一个模板。该模板是基本的，顶部是一个100px的标题（ROW a）、IFRAME（ROW B COL a），然后是一个播放栏（ROW B COL B）。如果我给iframe一个特定的高度，我可以做到这一点，但如果我把iframe调到100%的宽度或高度，它就会变小。就像100像素的小。
我希望iframe尽可能大，但为用户放在一个页面上——这也对移动使用有影响。如何强制嵌套的iframe填充页面上的剩余高度？
此外，我们的供应商有一个显示课程的工具（在同一域上），我可能不得不在他们的工具中对这个页面进行iframe——iframe的三次方。我宁愿它是一个css/html解决方案。
注意：当我尝试使用固定/绝对位置并将所有内容设置为100%时，它会设置为视频是视口的100%，因此100px的标题会将视频的底部推离页面。
一个名为vw和vh（视口宽度和视口高度）的优秀CSS测量单元可能会对您的情况有所帮助。
替换：width: 100%和height: 100%
具有：width: 100vw和height: 100vh
如果不起作用，请尝试将100vw/vh应用于<body>。有关详细信息，请参阅文章。如果其他元素被替换时出现问题，请尝试将<iframe>上的position: fixed更改为position: relative（如果有position: relative' on`，则为position: absolute）。
顺便说一句，你可能需要稍微调整一下，以适应a行和B行COL B