首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >嵌套响应的iframes变小?

嵌套响应的iframes变小?
EN

Stack Overflow用户
提问于 2015-10-30 17:22:58
回答 1查看 481关注 0票数 1

首先,我所做的一切都在同一个领域。我很幸运,我不需要处理原产地问题。第二,我可以接触所有的东西。

目前,我们正在玩我们的电子学习模块-明确和吸引通过响应HTML5通过wordpress。

代码语言:javascript
运行
复制
<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头将视频的底部从页面上推开。

EN

回答 1

Stack Overflow用户

发布于 2015-10-30 18:57:27

一个优秀的CSS度量单元,称为,vwvh (视口宽度和视口高度),可能会对您的情况有所帮助。

替换:width: 100%height: 100%

与:width: 100vwheight: 100vh

如果这不起作用,尝试将100vw/vh应用于<body>。有关详细信息,请参阅此ARTICLE。如果在替换其他元素时有问题,请尝试将position: fixed更改为<iframe>上的position: relative (如果在上有‘position: absolute:relative’)。

顺便说一句,您可能需要稍微调整一下以适应A行和B行的情况。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33441573

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档