Height of iFrame relative to content of source, then to keep the height dynamic

Question

Please excuse me if this has been answered elsewhere, I couldn't find the answer to my exact query, hence this post. I have a website created in pure HTML and CSS, with use of Javascript and jQuery for styling features. However, the website doesn't have a CMS for back-end. It's a somewhat simple website.

However, I am using a PHP script in order to run a mini e-commerce store. The storefront is very simple, it has products, and a simple checkout. The storefront does not have any header, footer or anything else. And this storefront is located fully in a sub-directory (eg /store/index.php ).

Now, I want to use an iFrame to put the /store/index.php page into the body of my /store.html page, as this has a coherent header and footer, meta tags etc.

When I insert the iFrame into the html page, I make the width 100% and that is fine, because both the html page and the storefront are responsive.

However, when I access the site using a mobile device - or - when I click on a product with a long description, the source-page becomes 'longer' than the height of the iFrame and therefore, scrollbars appear. This is problematic because there are now two scrollbars on the page, and it gets messy when using a mobile device.

Is there any way that I and iFrame's height can be dynamic, dependant on the height of the page it is linked to (the source page) - not just on-page-load, but actually dynamic in real time?

The only other way will be to build a similar header and footer on the storefront, and this will be a long and difficult process as both the front-end and storefront have been built using different CSS sheets etc.

Thanks :-)

Answer 1

Have you tried setting the iFrame's size in viewport height and width instead of a percentage? This would make it more dynamic than saying width='100%' considering that percentage is whatever size the parent element would be, where as vh and vw would be looking at the size of the viewport instead of the element.