我正在尝试在iframe中使用CSS vh
单元。我发现它们以某种方式缩放到iframe的大小。换句话说,100vh不是风向灯。它被设置为iframe的高度。
这看起来对吗?
有解决办法吗?
发布于 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*
单位控制许多元素的大小时,问题就开始了。
发布于 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
复制相似问题