Advanced iframe does support the css calc function when using the height. This means you can do calculations like 100vh – 40px. This means the iframe has the height of the browser windows minus 40px. This already works nice if you have a header which has a fixed height on all devices. But sometimes this is not enough. Advanced iframe can now also subtract the height of given elements dynamically by calculating the height by Javascript. Below you find this 2 scenarios:
- Example with a fixed header
- Example with dynamic elements (version >= 2020.1)
Below you find the used short codes as on the example pages is no space for this ;). The short codes contain hide_elements to hide all the elements which are normally on this page. Also some styles are modified to make the iframe full screen with content_id and content_styles.
The green parameters are the important ones! If you copy the examples please make sure you copy text only. Otherwise you copy the green style as well.
What is 100vh? You maybe don’t know this. 100vh means 100% of the viewport height! Please see here for more details!
Fixed header
This header is very simple and has a fixed height of 40px. 100vh – 40px is used.
[advanced_iframe width="100%" height="100vh-40px" src="//www.tinywebgallery.com" hide_elements="header,nav,footer" content_id=".site-inner|article|.wrap" content_styles="padding:0|margin-bottom:0|max-width: 100%"]
Dynamic header
Using top
Here the normal header of my page is used which does change depending on the resolution. The height is here also 100vh and the height is calculated simply by using “top” which does calculate everything from the beginning of the page till the top of iframe
[advanced_iframe id="advanced_iframe" width="100%" height="100vh" remove_elements_from_height="top" src="//www.tinywebgallery.com" hide_elements="footer" content_id="body|.site-inner|article|.wrap" content_styles="overflow:hidden|padding-left:0px;padding-right:0px|margin-bottom:0|max-width:100%"]
Using the elements before the iframe
Same as solution 2.1 but here all the elements above are calculated. This are the 2 headers and the section between the header and the iframe. The section between the header and the iframe is also dynamic because the font size does change depending on the width of the page. I also use the range calculation here to show this feature as well ;).
[advanced_iframe id="advanced_iframe" width="100%" height="100vh" remove_elements_from_height="nav,header,header|#advanced_iframe" src="//www.tinywebgallery.com" hide_elements="footer" content_id="body|.site-inner|article|.wrap" content_styles="overflow:hidden|padding-left:0px;padding-right:0px|margin-bottom:0|max-width:100%"]
Please note: There is another option. You can also simply add a number to the elements. This is then an additional X in pixels are subtracted.
Normally you should use “top” if you want to use a header only because it even takes the WordPress admin bar into account. The advanced config with all elements works excellent if you e.g. want to have a header and a footer and the iframe should cover the rest of the page.