CSS vh units inside an iframe
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 windo
-
I know this is an old question, but as people move toward the
vhunit, 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:And its
iframe:The important thing to note here is that both the
iframeand theiframe'sdivelement are designated as having a height of50vh. The intended behaviour may be that theiframehonor the parent context's viewport height or width. Instead, the result looks like this: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 theiframeto respect the viewport of its parent, this example makes a good case for how unintuitive that may be, though it surely would make thev*units more valuable for content beingiframe'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
iframeand 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
iframecreates 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.
加载中...
- 热议问题