Iframe bad; something else good

Below you can see that I use an iframe to receive the various pages into my grid container. I don’t WANT to use the iframe to receive the various pages into my grid container. The iframe’s height is not flexible (and I don’t want to use a flex box because it is way too complicated). I would like to use the grid container itself. But I don’t know if that is possible. If that is not possible, then what other receiving element could I use other than the iframe.

Here’s the problem. I want the reader to scroll down. But with an iframe, a height that is too short forces the iframe to create a slide bar if the reading material is too long for the iframe’s height. And if it is too long, then there is a bunch of white space with nothing in it.

And auto height does not work with iframe.

Holistic Healing Simplified
<style type="text/css">

	body  { font-family: Arial, Helvetica, sans-serif;  }
	ul {
		  list-style-type: none;
		  margin: 0;
		  padding: 0;
	     overflow: hidden;
	     background-color: #339;
	     float: left;
	     margin-left: 725px;        

	li {
		float: left;
	a {
		display: block;
		padding: 9px;
		background-color: coral;
	li a {
	  display: inline-block;
	  color: white;
	  text-align: center;
	  padding 20px 60px;
	  text-decoration: none;

	 Change the link color to #111 (black) on hover 
	li a:hover {
	  background-color: #111;
	.active {
	  background-color: #04AA6D;
	img {
       margin-bottom:1px     }

	.grid-container {
	  display: grid;
	  grid-template-columns: 27% 46% 27% auto auto ;
	  grid-gap: 1px;
	  background-color: white;                     /* #2196F3;  */
	  padding: 1px;
	.grid-container > div {
	  background-color: rgba(255, 255, 255, 0.8);
	  text-align: center;
	  padding: 1px 0;
	.item4 {
	  grid-column-start: 1;
	  grid-column-end: 4;
	  text-align: center;
	  color: black;
  	 .item5 {
	  grid-column-start: 1;
	  grid-column-end: 4;
	  text-align: left;
    height: auto;
embedded media item here using "img"
Holistic Health Simplified
A Tool Box for Holistic Healing
embedded media item here using "img"
  • embedded link here >Principles
  • embedded link here>Problems
  • embedded link here >Practices
  • embedded link hereSources
  • Notes
  • Forum
      <iframe src="Principles.html" style="height:1000px; width:100%;" title="myItem5">  </iframe> 

I’m not exactly sure what you want to do here but if the pages you are loading into the iframes are in the same domain as the parent page then you can use JS to dynamically adjust the height of the iframe so it fits the content in the page. If the pages are not in the same domain then it would require changes to both the parent and the individual pages, and if you don’t have access to those pages then you are kind of out of luck.

But I’m not sure I completely understand what you are trying to do here. Perhaps you could put a demo in codepen or github and then give us a link?

I don’t know what codepen or github is.
I have about 5 files in my directory. What I have above is the index.html that accesses those files. There are buttons that snatch the files for the reader to read. Right now, I snatch them into an iframe, but iframes suck. They don’t dynamical enlarge themselves to fit the size of the incoming file. How do I do that?

If you want help with projects then you’ll need to learn to use github as that is the best way to store your projects so other people can access them. Google “how to use github” and you can spend days on end going through tutorials that explain it.

I gave you a link to an article that explains how to do this above.

I didn’t see any link.

Change Iframe Size Automatically to Fit Content & Prevent Scrollbars

“First we need to wait for the iframe to be loaded so that its correct dimensions are available.”
All of this assumes that the iframe is in the incoming page. My iframe, as can easily be seen, in my “parent” file or index.html or the main file that is requesting all of the pages to come in. So that didn’t help any. And besides, if iframe was in the requested pages, it would already “know” how big the written material was.
How do I size the iframe or grid or whatever container I use to be big enough for incoming written files that are in my directory.

You can’t dynamically size the iframe until you know the dimensions of the page in the iframe, so yes, you have to wait until the page in the iframe is loaded so that you know the exact dimensions as it is displayed in the browser. The article gives you the JS code to create a load event listener for the iframe so that it will resize as soon as the iframe is finished loading the page. Just to be clear, this JS goes in the main/parent/index.html page, not in the pages that are being loaded into the iframe.

Yes, I understand this, and the article explicitly says this:

“For same-domain iframes, code changes are required only in the parent page . The iframe page needs no code changes.”

I’m not sure what more I can add here. I think there might be a communication gap here and possibly one of us is not quite understanding exactly what the other wants. This is where having access to your entire project might help.

I’ll try to give you access.

In the meantime, this sentence throws me: “The iframe page needs no code changes.” But the “iframe” page IS on the “main/parent/index.html page”. The iframe that I want to either control or get rid of is on the main/parent/index.html page.

How do I know that you won’t go looking for my user name and password for my bank account?

Roger Bird

I am using bluefish editor and I like it. What in one sentence each does codepen and github do?

My navbar is also misbehaving, as in not showing the active button. I can’t seem to figure that out on my own.

The “iframe page” is the page that is loaded in the iframe. The page that has the <iframe> tags on it is the “parent” page and the pages that are loaded in the iframes are the “iframe pages”. The article is telling you that you don’t have to make any changes to the pages being loaded in the <iframe>s, only to the parent page.

codepen gives you an easy way to share your HTML/CSS/JS (you copy/paste your code into the codepen editor) but it doesn’t allow you to host multiple HTML pages (at least not the free version) so it won’t really work for your project. github allows you to store ALL of your files in a public place for others to access (you upload your files to the github server). It is by far the most popular site to store projects you want other people to access.

If you want further help with this project you should probably put the project files into github so that we can see the most current version of what you have. You could try copy/pasting the relevant code in here but that is going to get old fast :smiley:

Thank you so much. This clears everything up. I will be putting everything in github soon. First, I want to comment everything nicely.

Thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you. I have a sense of certainty now. You helped an old man cross the busy street of his uncertainty.


So, I am at github and I have no clue what to do. Shouldn’t I be looking to send them my project?

You are going to have to do a little reading up on how to use github. I would google for something like “how to use github”. A few links that look promising:

How to Use Git {Beginner’s Guide}

GitHub Tutorial - Beginner’s Training Guide (video)

How to get started using GitHub

Using github is also going to require you to install a program called “git” on your computer. Don’t worry, it is perfectly safe to install. Any of the tutorials above will walk you through it.

I looked, but I don’t understand. This github is orders of magnitude more complicated than my code. I just need help with 2 or 3 little problems; I don’t need to spend weeks trying to understand an ultra-complicated (but popular, let’s not forget that) cloud program that stores my work, and may or may not make it available to others. I can already show you exactly what my problem is. Are you people resisting helping me because you don’t know how to help me? I’m not feeling the love.

If you want good help then you need to provide us with everything we need to help you. You are complaining that the iframes don’t adjust their height to the pages you want to put in them. I gave you a link to JS code that may help solve this issue. But I can’t test it with your exact project because I don’t have access to all of the files in your project. I’m just assuming that the JS code I linked to will help you because in general that’s how you do it, but there could be issues specific to your project that prevent the JS code from working properly. So I’m offering you the best advice I can with the limited information you gave me. Have you tried the JS solution I gave you?

Please refrain from the personal attacks. Everyone who responds on this forum is doing it out of the kindness of their own hearts and wants to help.

Dear Bruce, I am sorry I got frustrated and took it out on you.

I can’t do github or any other third-party software that is orders of magnitude more difficult and complicated than the program that I am working on now. Those kinds of programs are for large groups of people to work together on. But with this there is just you and me. Can’t we just work on this together. I could send you all of my files, which is like 6 along with 3 images.


I see iframe being denigrated, but I don’t see an alternative. How do I flow text from another file without using iframe.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.