iframe中的CSS vh单位
我正在尝试vh在iframe中使用CSS 单位.我发现它们以某种方式缩放到iframe的大小.换句话说,100vh不是窗口高度.它被设置为iframe的高度.
这看起来是对的吗？
有解决方法吗？
Jam*_*ell 35
我知道这是一个老问题,但随着人们走向该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%(100%iframe).虽然我们可能希望iframe尊重其父级的视口,但这个例子很好地证明了它可能是多么不直观,尽管它肯定会使v*单元对于内容更有价值iframe.问题与视口的方式有关高度确定.
从规格:
视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.
an iframe和浏览器窗口都可以是初始包含块,因为它们都是有效的视口.视口不限于浏览器窗口,而是被定义为用户查阅文档的屏幕上的窗口或其他查看区域.
An 插入到文档中时iframe会创建嵌套的浏览上下文,因此具有自己的视口.
所以是的,这是预期的行为 - 不幸的是没有纯CSS的解决方法 - 但是,www139提供了一个如何使用JavaScript实现这一点的示例.当使用v*单位控制许多元素的大小时,问题就开始了.
- 我希望在 safari 中实现这种确切的行为，但 safari 喜欢使用 vh 作为主浏览器视口，而不是 iframe 的高度:( 所以有与你完全相反的问题:( (3认同)
这是一个很好的问题。遗憾的是，我一直无法在 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(){
//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();
});
});
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;
}- 我认为任何反对都是因为你没有对计算出的值做任何有用的事情。vh 的重点是无论如何都要在 css 中使用它。您只是在调用一个不能用作 vh 的变量 vh。 (4认同)