blocks|key|2679259|text|这是一个很好的问题。遗憾的是，我还没能想出一个用CSS的解决方案，但我已经想出了一个用JavaScript的解决方案，我认为这是你目前最好的选择。请记住，帧必须位于相同的域中，才能正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2679260|希望这能有所帮助。如果这个答案需要改进，请在下面发表评论:-)|2679261|理论上的解决方案(由于框架来源问题，无法在此处使用)：|offset|length|style|BOLD|2679262|window.addEventListener('load',function(){
++++initializeV();
++++function+initializeV(){
++++++++++++//1%25+of+the+parent+viewport+width+(same+as+1vw):
++++++++++++var+vw+=+window.parent.innerWidth/100;
++++++++++++//1%25+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();
++++});
});|code-block|syntax|javascript|2679263|编辑(2018年12月)：在评论中，我被要求提供一个例子。我不能做一个确切的例子，因为Stackoverflow上的代码加载在与页面不同的框架来源上。然而，我可以模仿这种效果。对于实际应用，请参考上面的代码片段。这段代码只是为了说明它是如何工作的。|2679264|的实际应用。使用上面解释的概念，但没有框架引用。|2679265|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%25+of+the+parent+viewport+width+(same+as+1vw):
++++++++++++	var+vw+=+window.innerWidth/100;
++++++++++++++++//1%25+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%2B'px';
++++++++++++++document.getElementById('test').style.height+=+50*vh%2B'px';
++++++++++++++++//assign+width+and+height+to+your+v+unit+elements+here
++++++++}
++++++++
++++++++window.addEventListener('resize',function(){
++++++++++++++//when+the+browser+window+is+resized;+recalculate
++++++++++++++initializeV();
++++++++});
++++});|2679266|#test{
background:red;
}|2679267|<div+id="test"></div>|2679268|​|2679269|entityMap^0|0|0|4|N|0|0|0|0|O|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@$F|15|G|16|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@$F|1A|G|1B|H|I]]|9|@]|A|$]]|$1|S|3|T|5|L|7|1C|8|@]|9|@]|A|$M|N]]|$1|U|3|V|5|L|7|1D|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|L|7|1E|8|@]|9|@]|A|$M|N]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|11|$]]

<p>This is an excellent question. Sadly, I haven't been able to figure out a solution in CSS but I have been able to figure out a solution in JavaScript which I think is your best bet at the moment. Remember that the frames <em>must</em> be on the same domain for this to work.</p>

<p>Hope this helps. If this answer needs improvement, please comment below :-)</p>

<p><strong>Solution in Theory (can't use here on SO because of frame origin issue):</strong></p>

<pre><code>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();
    });
});
</code></pre>

<p>Edit (Dec. 2018): In the comments, I was asked to supply an example. I can't do an exact example because the codepens on Stackoverflow load over a different frame origin than the page. However, I can mimic the effect. For practical applications, please reference the code snippet above. This snippet is meant merely to illustrate how it works.</p>

<p><strong>Practical Application. Uses the concept explained above but without frame reference.</strong>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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();
        });
    });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#test{
background:red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|123032|text|我知道这是一个古老的问题，但随着人们转向vh单元，这个问题将变得更加常见。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|123033|为了澄清，这里有一个问题的例子。我们有一个加载iframe的超文本标记语言文件|123034|<!DOCTYPE+html>
<html>
<head></head>
<style>
iframe+{
++++height:+50vh;
++++width:+100%25;
}
</style>
<body>
++++<iframe+src="iframe.html"/>
</body>
</html>|code-block|syntax|javascript|123035|及其iframe|123036|<!DOCTYPE+html>
<html>
<head></head>
<style>
div+{
++++height:+50vh;
++++width:+100%25;
++++background:+blue;
}
</style>
<body>
++++<div></div>
</body>
</html>|123037|这里需要注意的重要一点是，iframe和iframe's+div元素都被指定为高度为50vh。预期的行为可能是iframe遵循父上下文的视区高度或宽度。相反，结果如下所示：|123038|​|123039|📷|atomic|123040|123041|也就是说，蓝色元素的高度约为浏览器窗口的25%25，而不是预期的50%25+(iframe的100%25)。虽然我们可能希望iframe尊重其父对象的视区，但这个例子很好地说明了这可能有多不直观，尽管它肯定会使v*单位对于iframe'd内容更有价值。问题与视区高度如何确定有关。|123042|来自the+spec|123043|123044|视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度发生更改时，它们会相应地进行缩放。|blockquote|BOLD|123045|123046|123047|iframe和浏览器窗口都可以是initial+containing+block，因为它们都是有效的视口。视区不限于浏览器窗口，而是被定义为用户通过其查阅文档的屏幕上的窗口或其他查看区域。|123048|iframe在插入到文档中时会创建一个nested+browsing+context，因此是它自己的视区。|123049|所以，是的，这是预期的行为--不幸的是，没有纯粹的CSS解决方案--然而，www139提供了一个如何使用JavaScript来实现这一点的示例。当使用v*单位控制许多元素的大小时，问题就开始了。|123050|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/961f619fe7addb667cc3382fbc0e6883.png|imageAlt|1|LINK|MUTABLE|url|https://www.w3.org/TR/css-values/#viewport-relative-lengths|2|https://www.w3.org/TR/CSS21/visudet.html#containing-block-details|3|https://dev.w3.org/html5/spec-preview/browsers.html#nested-browsing-context^0|K|2|0|N|6|0|0|2|6|0|0|D|6|K|8|T|3|16|4|1J|6|0|0|0|1|0|0|0|Z|6|1K|6|2R|2|2X|6|0|2|8|1|0|0|8|5|0|0|0|0|6|G|O|2|0|0|6|J|N|3|0|23|2|0^^$0|@$1|2|3|4|5|6|7|1X|8|@$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|20|8|@$9|21|A|22|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|23|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|24|8|@$9|25|A|26|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|27|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|28|8|@$9|29|A|2A|B|C]|$9|2B|A|2C|B|C]|$9|2D|A|2E|B|C]|$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|2J|8|@]|D|@]|E|$]]|$1|U|3|V|5|W|7|2K|8|@]|D|@$9|2L|A|2M|1|2N]]|E|$]]|$1|X|3|T|5|6|7|2O|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|2P|8|@$9|2Q|A|2R|B|C]|$9|2S|A|2T|B|C]|$9|2U|A|2V|B|C]|$9|2W|A|2X|B|C]]|D|@]|E|$]]|$1|10|3|11|5|6|7|2Y|8|@]|D|@$9|2Z|A|30|1|31]]|E|$]]|$1|12|3|-4|5|6|7|32|8|@]|D|@]|E|$]]|$1|13|3|14|5|15|7|33|8|@$9|34|A|35|B|16]]|D|@]|E|$]]|$1|17|3|-4|5|6|7|36|8|@]|D|@]|E|$]]|$1|18|3|-4|5|6|7|37|8|@]|D|@]|E|$]]|$1|19|3|1A|5|6|7|38|8|@$9|39|A|3A|B|C]]|D|@$9|3B|A|3C|1|3D]]|E|$]]|$1|1B|3|1C|5|6|7|3E|8|@$9|3F|A|3G|B|C]]|D|@$9|3H|A|3I|1|3J]]|E|$]]|$1|1D|3|1E|5|6|7|3K|8|@$9|3L|A|3M|B|C]]|D|@]|E|$]]|$1|1F|3|-4|5|6|7|3N|8|@]|D|@]|E|$]]]|1G|$1H|$5|1I|1J|1K|E|$1L|1M|1N|-4]]|1O|$5|1P|1J|1Q|E|$1R|1S]]|1T|$5|1P|1J|1Q|E|$1R|1U]]|1V|$5|1P|1J|1Q|E|$1R|1W]]]]

<p>I know this is an old question, but as people move toward the <code>vh</code> unit, this question will become much more common.</p>

<p>To clarify, here's an example of the problem. We have an HTML file that loads an <code>iframe</code>:</p>

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

<p>And its <code>iframe</code>:</p>

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

<p>The important thing to note here is that both the <code>iframe</code> and the <code>iframe's</code> <code>div</code> element are designated as having a height of <code>50vh</code>. The intended behaviour may be that the <code>iframe</code> honor the parent context's viewport height or width. Instead, the result looks like this:</p>

<p><a href="https://i.stack.imgur.com/vcfAW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vcfAW.png" alt="enter image description here"></a></p>

<p>That is, the height of the blue element is ~25% of the browser window, instead of the expected 50% (100% of the <code>iframe</code>). Although we may wish the <code>iframe</code> to respect the viewport of its parent, this example makes a good case for how unintuitive that may be, though it surely would make the <code>v*</code> units more valuable for content being <code>iframe</code>'d in. The problem has to do with how viewport height is determined.</p>

<p>From <a href="https://www.w3.org/TR/css-values/#viewport-relative-lengths" rel="noreferrer">the spec</a>:</p>

<blockquote>
  <p>The viewport-percentage lengths are relative to the size of the <strong>initial containing block</strong>. When the height or width of the initial containing block is changed, they are scaled accordingly.</p>
</blockquote>

<p>Both an <code>iframe</code> and the browser window can be the <a href="https://www.w3.org/TR/CSS21/visudet.html#containing-block-details" rel="noreferrer">initial containing block</a>, as they are both valid viewports. A viewport is not limited to the browser window, but instead is defined as <em>a window or other viewing area on the screen through which users consult a document</em>. </p>

<p>An <code>iframe</code> creates a <a href="https://dev.w3.org/html5/spec-preview/browsers.html#nested-browsing-context" rel="noreferrer">nested browsing context</a> when inserted into a document, and thus is its own viewport.</p>

<p>So yes, this is the intended behaviour - and unfortunately there is no pure CSS workaround - however, www139 has provided an example of how this can be accomplished using JavaScript. The problem with this begins when many elements' size are controlled using <code>v*</code> units.</p>


<p>I'm trying to use CSS <code>vh</code> units inside of an iframe. I'm finding that they are scaled to the size of the iframe somehow. In other words, 100vh isn't the windowheight. It's set to the height of the iframe.</p>

<p>Does this seem right?</p>

<p>Is there a workaround?</p>


CSS vh units inside an iframe

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试在iframe中使用CSS vh单元。我发现它们以某种方式缩放到iframe的大小。换句话说，100vh不是风向灯。它被设置为iframe的高度。这看起来对吗？有解决办法吗？

问iframe中的CSS vh单元
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iframe中的CSS vh单元EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iframe中的CSS vh单元
EN