iframe中的CSS vh单元
我正在尝试在iframe中使用CSS vh单元。我发现它们以某种方式缩放到iframe的大小。换句话说，100vh不是风向灯。它被设置为iframe的高度。
这看起来对吗？
有解决办法吗？
回答 2
Stack Overflow用户
发布于 2017-06-19 23:23:39
我知道这是一个古老的问题，但随着人们转向vh单元，这个问题将变得更加常见。
为了澄清，这里有一个问题的例子。我们有一个加载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'd内容更有价值。问题与视区高度如何确定有关。
来自the spec
视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度发生更改时，它们会相应地进行缩放。
iframe和浏览器窗口都可以是initial containing block，因为它们都是有效的视口。视区不限于浏览器窗口，而是被定义为用户通过其查阅文档的屏幕上的窗口或其他查看区域。
iframe在插入到文档中时会创建一个nested browsing context，因此是它自己的视区。
所以，是的，这是预期的行为--不幸的是，没有纯粹的CSS解决方案--然而，www139提供了一个如何使用JavaScript来实现这一点的示例。当使用v*单位控制许多元素的大小时，问题就开始了。
Stack Overflow用户
发布于 2015-12-03 13:25:29
这是一个很好的问题。遗憾的是，我还没能想出一个用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上的代码加载在与页面不同的框架来源上。然而，我可以模仿这种效果。对于实际应用，请参考上面的代码片段。这段代码只是为了说明它是如何工作的。
的实际应用。使用上面解释的概念，但没有框架引用。
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>
https://stackoverflow.com/questions/34057239
复制相似问题