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

I initially wanted it to be the full view of the website, but soon found out that I have a title that I have a title on the page that holds the iframe(http://bloggingnetworkonline.com/InternetMarketing/iframe-test/) and a few clickable links at the bottom of the page for other important information. That being said, the iframe needs to be in between them, but not extend outside of the gray columns. Sorry for making this so difficult. I’m a perfectionist in a way, but for a good reason.

I guess the question here is, if the iframe is resized, will the website holding the embedded iframe react to that and resize itself, therefore eliminating the scrollbar?

josephlewandowski,

This page does indeed have an iframe on it, but it has no title and no gray bars along the sides. So what’s the problem that we’re supposed to be solving?

Where is the page that the iframe is supposed to be reading? Is it responsive?

Please explain why the following INVALID code appears in the middle of the test page?

<div class="textwidget">
<p><!DOCTYPE HTML><br />
<html><br />
<head><br />
<meta charset="utf-8"><br />
<title>Untitled Document</title><br />
</head><br />
<body><br />
<iframe style="position:fixed;left:0;top:0;<br />
right:0;bottom:0;overflow:auto;width:100%;height:100%; name="myFrame" frameborder="0"src="http://landingpagejosephl.weebly.com/"><br />
</body><br />
</html></p>
</div></div>
</div>

Right, that’s because that iframe was set to be the entire width and height of the screen. If it’s decreased, you will be able to see what I’m talking about. Hmm, now is there a way you could see what I’m talking about?

josephlewandowski,

Yes, present a coherent demonstration of the issue using working pages and answer those 3 questions that I posed in my last post.

How about NOT using “bloggingnetworkonline.com”. Just create working pages and put them on your site.

You seem to be avoiding the fact that the code on “bloggingnetwork” is completely invalid.

Got it. I went into inspect and deleted the iframe to show you what I’m talking about:

Invalid?

https://validator.w3.org/nu/?doc=http%3A%2F%2Fbloggingnetworkonline.com%2FInternetMarketing%2Fiframe-test%2F
Only 309 erros. :grimacing:

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

I requested this thread to be closed. From here on, I need recommendations as to how I should accomplish what it is that I want to do. Details will be posted.

As I read this line again, it sounds like Mr.ski wants his landing-page to have an iframe that reads a second site that also has an iframe (the embedded iframe) that is reading a third site.

The problem, sir, is that you have not described/demonstrated clearly what it is that you want to do. You are playing it too close to the vest and we are having trouble interpreting whatever it is you want to do.

Why don’t you take an HTML/CSS course and learn to write valid code? Consider it an investment in your future.

I read it to mean that the OP wants an iframe embedded seamlessly into a responsive page so that the Iframe is constantly resized to its content thus avoiding scrollbars and thus appearing as native content.

Yes, I understood that. :wink:

While you were typing I was considering a different possible interpretation. I went ahead and posted it because his last demo routed us from an iframe to another post with an iframe…

1 Like

I’m sorry. I fell down a rabbit hole and I want to get out. I need recommendations as to how I should tackle this business plan

Closed per OP’s request.