frame-sizing CSS property
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The frame-sizing CSS property can be used to set an <iframe> element's horizontal or vertical size to equal the layout size of its embedded document in the same dimension, but only if the embedded document has opted in to sharing its size information.
Syntax
/* Keyword values */
frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;
/* Global values */
frame-sizing: inherit;
frame-sizing: initial;
frame-sizing: revert;
frame-sizing: revert-layer;
frame-sizing: unset;
Values
The frame-sizing property value is equal to one of the following keywords:
auto-
The initial value. The
<iframe>element's size is not affected by the layout size of its embedded document. content-width-
The
<iframe>element'swidthis set to the layout width of its embedded document. content-height-
The
<iframe>element'sheightis set to the layout height of its embedded document. content-inline-size-
The
<iframe>element'sinline-sizeis set to the layout size of its embedded document in the inline direction. content-block-size-
The
<iframe>element'sblock-sizeis set to the layout size of its embedded document in the block direction.
Description
For security and privacy reasons, <iframe> elements do not by default expose any information to the parent document about the size of the content in the document they are embedding.
To enable responsive sizing of <iframe> elements based on their content, the <meta name="responsive-embedded-sizing"> tag can be included in an embedded document to opt it in to sharing its size information with the parent document. The frame-sizing property can then be set on the <iframe> to cause it to adopt the same horizontal or vertical size as the embedded document's actual content size (termed the internal layout intrinsic size in the spec, but abbreviated to "layout size" in our documentation). The document content will then fit seamlessly into the embedding <iframe>, avoiding unnecessary scrollbars.
The frame-sizing property can take values of content-width or content-height to cause the <iframe> element's width or height to adopt the embedded document's layout width or layout height, respectively.
There are also logical equivalents available â frame-sizing can take values of content-inline-size or content-block-size to cause the <iframe> element's inline-size or block-size to adopt the embedded document's inline size or block size, respectively. The block or inline direction is determined by the <iframe> element's writing-mode, not that of the embedded document's content.
To resize the <iframe> dynamically as the embedded document changes layout size, you can call the Window.requestResize() method from the embedded document to make it report an updated size.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | replaced elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
frame-sizing =
auto |
content-width |
content-height |
content-block-size |
content-inline-size
Examples
Basic usage
This example demonstrates usage of the frame-sizing property.
We have two documents, the main index.html document, and the embedded frame.html document.
The main index.html
The index.html document's HTML contains a heading and an <iframe>, into which is embedded the frame.html document:
<h1>Responsive iframes â basic example</h1>
<iframe src="frame.html"></iframe>
In the index.html CSS, we give the <iframe> a frame-sizing value of content-block-size. Because the <iframe> has a horizontal writing-mode, its height will be set to the embedded document's layout height.
iframe {
frame-sizing: content-block-size;
border: 2px solid gray;
}
The embedded frame.html
The frame.html document contains a heading and some paragraphs. More significantly, however, it includes the <meta name="responsive-embedded-sizing" /> tag, which opts it in to sharing its content layout size with the parent document.
<head>
...
<meta name="responsive-embedded-sizing" />
...
</head>
<body>
<h1>This is my frame</h1>
<p>This is the content of my discontent.</p>
<p>This is some more content.</p>
</body>
Result
Open our basic responsive <iframe> sizing demo in a separate tab to see it in action (see the source code).
Even though no explicit height has been set on the <iframe>, it is sized to the right height to exactly contain its embedded document, with no scroll bars.
Specifications
| Specification |
|---|
| CSS Box Sizing Module Level 4 # responsive-iframes |