Question

我尝试在iframe中使用CSS vh单元。我发现它们以某种方式缩放到iframe的大小。换句话说，100vh不是窗口高度。它设置为iframe的高度。

这看起来是对的吗？

有解决方法吗？

Answer 1

我知道这是一个老问题，但随着人们走向vh单位，这个问题会变得更加普遍。

澄清一下，这是问题的一个例子。我们有一个HTML文件，可以加载iframe：

<!DOCTYPE html>
<html>
<head></head>
<style>
iframe {
    height: 50vh;
    width: 100%;
}
</style>
<body>
    <iframe src="iframe.html"/>
</body>
</html>

及其iframe：

<!DOCTYPE html>
<html>
<head></head>
<style>
div {
    height: 50vh;
    width: 100%;
    background: blue;
}
</style>
<body>
    <div></div>
</body>
</html>

这里要注意的重要一点是，iframe和iframe's div元素都被指定为高度50vh。预期的行为可能是iframe尊重父上下文的视口高度或宽度。相反，结果如下所示：

也就是说，蓝色元素的高度约为浏览器窗口的25％，而不是预期的50％（iframe的100％）。虽然我们可能希望iframe尊重其父级的视口，但这个例子很好地说明了它的不直观性，尽管它肯定会使v*个单元对内容iframe更有价值{{} 1}}＆＃39; d。问题与视口高度的确定方式有关。

来自the spec：

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

iframe和浏览器窗口都可以是initial containing block，因为它们都是有效的视口。视口不仅限于浏览器窗口，而是定义为用户查阅文档的屏幕上的窗口或其他查看区域。

iframe在插入文档时会创建nested browsing context，因此拥有自己的视口。

所以是的，这是预期的行为 - 不幸的是没有纯CSS的解决方法 - 但是，www139提供了一个如何使用JavaScript实现这一点的示例。当许多元素出现时，问题就开始了。大小由v*单位控制。

Answer 2

这是一个很好的问题。遗憾的是，我还没有找到CSS的解决方案，但我已经能够找到JavaScript中的解决方案，我认为这是目前最好的选择。请记住，框架必须位于同一个域上才能使其正常工作。

希望这会有所帮助。如果这个答案需要改进，请在下面评论： - ）

理论上的解决方案（由于帧起源问题，不能在此处使用）：

window.addEventListener('load',function(){
    initializeV();
    function initializeV(){
            //1% of the parent viewport width (same as 1vw):
            var vw = window.parent.innerWidth/100;
            //1% of the viewport height (same as 1vh):
            var vh = window.parent.innerHeight/100;

            //assign width and height to your v unit elements here
    }

    window.parent.addEventListener('resize',function(){
          //when the browser window is resized; recalculate
          initializeV();
    });
});

编辑（2018年12月）：在评论中，我被要求提供一个例子。我不能做一个确切的例子，因为Stackoverflow上的codepen加载不同于页面的帧原点。但是，我可以模仿这种效果。对于实际应用，请参考上面的代码片段。此片段仅用于说明其工作原理。

实际应用。使用上面解释的概念但没有框架参考。

window.addEventListener('load',function(){
        initializeV();
        function initializeV(){
                //note: I can't use window.parent becuase the code snippet loads on a different frame than the parent page. See the other snippet for a practical example. This snippet is meant to merely illustrate the effect.
                //1% of the parent viewport width (same as 1vw):
            	var vw = window.innerWidth/100;
                //1% of the viewport height (same as 1vh):
            	var vh = window.innerHeight/100;
        
              //this is where the magic happens. Simply set width/height/whatever to a multiple of vw/vh and add 'px'. Dimensions must be in pixels since the vw/vh measurement is based on pixels.
              document.getElementById('test').style.width = 30*vw+'px';
              document.getElementById('test').style.height = 50*vh+'px';
                //assign width and height to your v unit elements here
        }
        
        window.addEventListener('resize',function(){
              //when the browser window is resized; recalculate
              initializeV();
        });
    });

#test{
background:red;
}

<div id="test"></div>

iframe中的CSS vh单位

2 个答案: