我首先要做的就是在同一个域上。我很幸运，我不需要处理原产地问题。其次，我可以访问所有内容。
目前我们正在播放我们的电子学习模块 - 通过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文件，并注意Captivate是在multiscreen.html中的iframing实际内容。所以我们有一个嵌套的iframe。
我被要求从整页响应式设计转移并添加模板。模板是基本的，顶部是100px标题（ROW A），IFRAME（ROW B COL A），然后是播放栏（ROW B COL B）。我可以这样做，如果我给iframe一个特定的高度但是如果我把iframe转到100％的宽度或高度变得很小。像100px微小。
我希望iframe尽可能大，但让用户坐在一个页面上 - 这也会对移动设备的使用产生影响。如何强制嵌套的iframe填充页面上的剩余高度？
此外，我们的供应商有一个显示课程的工具（在同一个域上），我可能必须在他们的工具中使用此页面 - iframe到第三个权限。我宁愿它是一个css / html解决方案。
注意：当我尝试使用固定/绝对位置并将所有内容设置为100％时，它设置正确视频是视口的100％所以100px标题推动了底部视频关闭页面。
答案 0 :(得分：1)
一个名为vw和vh（视口宽度和视口高度）的优秀CSS测量单元可能对您的情况有所帮助。
替换：width: 100%和height: 100%
：width: 100vw和height: 100vh
如果不起作用，请尝试将100vw/vh应用于<body>。有关详细信息，请参阅此ARTICLE。如果您在替换其他元素时遇到问题，请尝试将position: fixed更改为position: relative上的<iframe>（如果您有position: absolute，则可以position: relative' on）。