我正在尝试vh在iframe中使用CSS 单位.我发现它们以某种方式缩放到iframe的大小.换句话说,100vh不是窗口高度.它被设置为iframe的高度.
这看起来是对的吗？
有解决方法吗？
我知道这是一个老问题,但随着人们走向该vh单位,这个问题将变得更加普遍.
澄清一下,这是问题的一个例子.我们有一个HTML文件加载iframe:
它的iframe:
这里要注意的重要一点是,iframe和iframe's div元素都被指定为高度为50vh.预期的行为可能是iframe尊重父上下文的视口高度或宽度.相反,结果如下所示:
也就是说,蓝色元素的高度约为浏览器窗口的25%,而不是预期的50%(100%iframe).虽然我们可能希望iframe尊重其父级的视口,但这个例子很好地证明了它可能是多么不直观,尽管它肯定会使v*单元对于内容更有价值iframe.问题与视口的方式有关高度确定.
从规格:
视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.
an iframe和浏览器窗口都可以是初始包含块,因为它们都是有效的视口.视口不限于浏览器窗口,而是被定义为用户查阅文档的屏幕上的窗口或其他查看区域.
An 插入到文档中时iframe会创建嵌套的浏览上下文,因此具有自己的视口.
所以是的,这是预期的行为 - 不幸的是没有纯CSS的解决方法 - 但是,www139提供了一个如何使用JavaScript实现这一点的示例.当使用v*单位控制许多元素的大小时,问题就开始了.
京公网安备 11010802040832号 | 京ICP备19059560号-6 