41

I'm trying to use CSS vh 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.

Does this seem right?

Is there a workaround?

10
  • 1
    use javascript for this. Check out window.innerWidth and window.innerHeight.
    – www139
    Dec 3, 2015 at 3:41
  • Is the iframe on the same domain?
    – www139
    Dec 3, 2015 at 3:41
  • Could you make a jsfiddle for us?
    – www139
    Dec 3, 2015 at 3:42
  • It is the same domain. It seems I will need to use JS or set the vh fractional to the total iframe height. Can't make a fiddle atm. @www139
    – Union find
    Dec 3, 2015 at 4:48
  • 2
    FWIW: I couldn't get vw, vh to work at all at first. Turns out I had copied an old iframe example, that set width and height attributes of the iframe tag. E.g <iframe ... width: "320" height: "200" .../>. Remove those - vw and vh won't work there - and use CSS styling. E.g. if doing inline CSS: <iframe ... style="width: 100%; height: 80vh" .../>. Oct 8, 2019 at 13:30

2 Answers 2

50

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

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

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

And its iframe:

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

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

enter image description here

That is, the height of the blue element is ~25% of the browser window, instead of the expected 50% (100% of the iframe). Although we may wish the iframe 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 v* units more valuable for content being iframe'd in. The problem has to do with how viewport height is determined.

From the spec:

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

Both an iframe and the browser window can be the initial containing block, as they are both valid viewports. A viewport is not limited to the browser window, but instead is defined as a window or other viewing area on the screen through which users consult a document.

An iframe creates a nested browsing context when inserted into a document, and thus is its own viewport.

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 v* units.

4
  • 3
    I want this exact behavior within safari but safari likes to use vh as the main browser viewport and not the height of the iframe :( so having the exact opposite problem to you :( Jun 20, 2018 at 22:27
  • @Simon_Weaver I get the same result I described above in Safari 11.1. I can't imaging there are large differences with how this works, as it is part of the spec. Are you sure the same mechanics are at play for you? Did you try the minimally complete example above in your browser? Jun 21, 2018 at 12:13
  • It seems Safari is very picky about iframes. Elements set to a height of 100vh appear the full height of the content instead of the viewport height. Fixed position elements break scrolling completely. Also I believe same-domain iframes behave slightly differently too. So maybe those things has an effect. I was trying to create an iframe to host my website on an ipad in order to simulate different screen sizes. I gave up because it looks like iOS just doesn't want you to do that. In the end I found an app 'Inspect' which can do this natively and even gives me a console on iOS. Jun 21, 2018 at 19:13
  • In your test can you scroll the window. Obviously for testing a website I need to scroll - so that could be the distinction. I was able to see the 'correct' behavior I was after when I ran testiphone.com (100vh filled the viewport) but I couldn't scroll it. I want the iframe to act like a completely self contained browser but obviously that's not going to happen. Fortunately the ipad app I found is working quite well. Jun 21, 2018 at 19:16
9

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 must be on the same domain for this to work.

Hope this helps. If this answer needs improvement, please comment below :-)

Solution in Theory (can't use here on SO because of frame origin issue):

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

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.

Practical Application. Uses the concept explained above but without frame reference.

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>

8
  • 1
    @JamieCounsell What does "//assign width and height to your v unit elements here" mean? How do I do that? Could you please provide an example? Thanks
    – Sam Gurdus
    Nov 21, 2017 at 4:18
  • @SamGurdus that's where CSS properties are set with JavaScript. For example, document.getElementById("test").style.width = 10*vw+'px'; will set the width of the element #test to be 10% (or 10vw) of the viewport's width.
    – www139
    Nov 21, 2017 at 5:52
  • I have another iframe within the iframe, and I think this is breaking it. Here is the code of the main iframe. jsfiddle.net/samgurdus/o3vkhp5o
    – Sam Gurdus
    Nov 21, 2017 at 6:12
  • Care to explain the downvotes? What do you think can be improved?
    – www139
    Apr 2, 2018 at 14:57
  • 4
    I think any downvote would be because you don’t do anything useful with the calculated value. The whole point of vh is to use it in css anyway. You’re just calling a variable vh that can’t be used as vh. Jun 20, 2018 at 22:29

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.