How do I make an iFrame the size of my website's layout?

Hi,

We seem to be taking a long time to get to what you need but just to clarify can you confirm that the following is what you are looking for.

You have a normal centred max-width responsive site that is white in the middle and the body background at the side of the centred layout is gray which I assume are the two columns you keep mentioning but aren’t actually columns at all but just the background to the page?

In this site you have a header and footer but between the header and footer you want to seamlessly insert an iframe so that it appears to be native content and not and iframe (no scroll bars)?

The iframe needs to fill the width of the centred layout but as the content in the iframe is fluid it means the iframe itself will need to incease and decrease in height accordingly as the browsers window is opened or closed so that no scroll bars are triggered on the iframe itself?

If all of the above is true then the answer is No :slight_smile:

It can’t be done by any normal html or css means.

It can be accomplished (with reservations) by using a script that listens to the iframe and posts a message to the parent page and vice versa and then resizes the iframe. There are a number of scripts about that can accomplish this and there may be cross-domain and browser issues but I believe you can get something working clsoe to what you want but is not an easy task.

There are other scripts around so google iframe resizing. I do remember doing something similar years ago and it took ages to get right,

Generally iframes are a pain and best avoided if you can.

1 Like