首先,我所做的一切都在同一个领域。我很幸运,我不需要处理原产地问题。第二,我可以接触所有的东西。
目前,我们正在玩我们的电子学习模块-明确和吸引通过响应HTML5通过wordpress。
<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中的实际内容。所以我们有一个嵌套的iframe。
我已经被要求从完整的页面响应设计,并添加一个模板。模板是基本的,是顶部(A行)、IFRAME (行B、COL A)上的100 is头,然后是播放条(行B、COL B)。我可以这样做,如果我给iframe一个特定的高度,但如果我把iframe的宽度或高度100%,它会变小。就像100便士小。
我希望iframe尽可能大,但坐在一个页面上为用户-这也有影响的移动使用。如何强制嵌套的iframes填充页面上的剩余高度?
此外,我们的供应商有一个工具,显示课程(在同一领域),我可能必须让这个页面在他们的工具- iframe到第三权力。我宁愿它是css/html解决方案。
备注::当我尝试使用固定/绝对位置和100%的样式时,它设置正确,因为视频是视口的100%,所以100 of头将视频的底部从页面上推开。
发布于 2015-10-30 18:57:27
一个优秀的CSS度量单元,称为,vw和vh (视口宽度和视口高度),可能会对您的情况有所帮助。
替换:width: 100%和height: 100%
与:width: 100vw和height: 100vh
如果这不起作用,尝试将100vw/vh应用于<body>。有关详细信息,请参阅此ARTICLE。如果在替换其他元素时有问题,请尝试将position: fixed更改为<iframe>上的position: relative (如果在上有‘position: absolute:relative’)。
顺便说一句,您可能需要稍微调整一下以适应A行和B行的情况。
https://stackoverflow.com/questions/33441573
复制相似问题