iframe内的CSS vh单元_Css_Iframe

iframe内的CSS vh单元

css iframe

iframe内的CSS vh单元,css,iframe,Css,Iframe,我试图在iframe中使用CSSvh单元。我发现它们以某种方式缩放到iframe的大小。换句话说，100vh不是窗高。它被设置为iframe的高度这看起来对吗有解决办法吗？这是一个很好的问题。遗憾的是，我还没有找到CSS的解决方案，但我已经找到了JavaScript的解决方案，我认为这是目前最好的选择。请记住，帧必须位于同一个域上，才能正常工作希望这有帮助。如果这个答案需要改进，请在下面评论：-）理论上的解决方案（由于框架原点问题，无法在此使用）： window.addEventList

我试图在iframe中使用CSS

vh

单元。我发现它们以某种方式缩放到iframe的大小。换句话说，100vh不是窗高。它被设置为iframe的高度

这看起来对吗

有解决办法吗？

这是一个很好的问题。遗憾的是，我还没有找到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上的codepens加载在与页面不同的帧原点上。然而，我可以模仿这种效果。对于实际应用，请参考上面的代码片段。这个片段仅仅是为了说明它是如何工作的

实际应用。使用上述概念，但无框架参考。

window.addEventListener（'load'，function（）{
initializeV（）；
函数initializeV（）{
//注意：我不能使用window.parent，因为代码段加载在与父页面不同的框架上。请参阅其他代码段以获取实际示例。此代码段仅用于说明效果。
//父视口宽度的1%（与1vw相同）：
var vw=窗内宽度/100；
//视口高度的1%（与1vh相同）：
var vh=窗内高度/100；
//这就是神奇之处。只需将宽度/高度/任意值设置为vw/vh的倍数，并添加“px”。尺寸必须以像素为单位，因为vw/vh测量值基于像素。
document.getElementById（'test'）.style.width=30*vw+'px'；
document.getElementById（'test'）.style.height=50*vh+'px'；
//在此处为v单位元素指定宽度和高度
}
addEventListener（'resize'，function（））{
//调整浏览器窗口的大小时；重新计算
initializeV（）；
});
});
#测试{
背景：红色；
}
我知道这是一个老问题，但随着人们转向vh
单元，这个问题将变得更加常见
为了澄清，这里有一个问题的例子。我们有一个加载iframe
的HTML文件：
<!DOCTYPE html>
<html>
<head></head>
<style>
iframe {
    height: 50vh;
    width: 100%;
}
</style>
<body>
    <iframe src="iframe.html"/>
</body>
</html>

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

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

也就是说，蓝色元素的高度约为浏览器窗口的25%，而不是预期的50%（100%为iframe
）。虽然我们可能希望iframe
尊重其父对象的视口，但这个示例很好地说明了这可能是多么不直观，尽管它肯定会使v*
单元对于iframe
中的内容更有价值。问题与如何确定视口高度有关
发件人：
视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度更改时，它们将相应地缩放
iframe
和浏览器窗口都可以是，因为它们都是有效的视口。视口不限于浏览器窗口，而是定义为屏幕上的窗口或其他查看区域，用户可通过该窗口查阅文档
iframe
在插入文档时创建一个视图，因此是它自己的视口
因此，是的，这是预期的行为-不幸的是，没有纯CSS解决方案-然而，www139提供了一个如何使用JavaScript实现这一点的示例。当使用v*
units控制许多元素的大小时，问题就开始了。
为此使用javascript。请查看window.innerWidth
和window.innerHeight
。iframe是否在同一个域上？能否为我们制作一个JSFIDLE？它是同一个域。似乎我需要使用JS或将vh
分数设置为总iframe高度。不能做小提琴自动取款机@www139FWIW：一开始我根本无法让大众、vh工作。原来我复制了一个旧的iframe示例，它设置了iframe标记的width
和height
属性。例如
。删除这些-大众和vh将不会在那里工作-并使用CSS样式。例如，如果使用内联CSS:
@JamieCounsell“//assign width and height to your v unit elements here”是什么意思？我该怎么做？你能举个例子吗？Thanks@SamGurdus这就是用JavaScript设置CSS属性的地方。例如，document.getElementById（“test”）.style.width=10*vw+'px'
会将元素#test的宽度设置为视口宽度的10%（或10vw）。我在iframe中有另一个iframe，我认为这破坏了它。下面是主iframe的代码。你想解释一下反对票的原因吗？你认为可以改进什么？我认为任何否决票都是因为你没有对计算值做任何有用的事情。vh的全部目的就是在css中使用它。您只是调用了一个不能用作vh的变量vh。我希望在safari中有这种确切的行为，但safari喜欢使用vh作为主浏览器视口，而不是iframe的高度：（因此，有一个与您完全相反的问题：（@Simon_Weaver我得到了与上面在Safa中描述的相同的结果