iFrame Height To Full Content

Question

I have a site where effectively i want to create a banner across the top and beneath display another site in it's entirety without an additional scrollbar within the page. So i've considered iframe but i cannot get it to display correctly. I want the page to load to the full height of the subservient pages content and alter accordingly. I want the simplest code possible to avoid confusion as my understanding of this is limited. This is the code i have tried

   <iframe src="https://edition.cnn.com/" width="100%" height="100%" scrolling="no">

iframes are not supported by your browser.

If i put in say 5000 as the height i can display most of the page without a fixed scroll frame. If i put 100% as the iframe height the iframe is is very short like 150 high (a guess), dunno why it defaults to this small size if its 100%.

So is there a code i can add to the above so that it automatically adjusts the iframe to the full height of the content it is displaying.

Any pointers very much appreciated.

Thanks

p.s i used cnn purely for example purpose.

Hi Travis welcome to Stackoverflow. To the person who downvoted your question, please add a comment next time so that OP understands what OP is doing wrong. Travis please do refer to the following: https://stackoverflow.com/help/how-to-ask If you need any more help, please add more (contextual) code so that people on stackoverflow could provide you with information, tips or answers on how to improve your code or make it work. — Barrosy, Jan 22 '19 at 13:00
"i used cnn purely for example purpose." — http://example.com http://example.net and http://example.org exist for example purpose, don't use arbitrary other websites for that. — Quentin, Jan 22 '19 at 13:19

Barrosy · Answer 1 · 2019-01-22T13:31:23.003

If you try to set the height to a 100%, this will mean that the element will try to fit a 100% in given property of given element's parent element. So for example, if the iframe height has been set to a 100% and the parent element has a height of 400 pixels (400px) and no other elements are present in given parent element, then the iframe will have the exact same size (not counting any whitespace that might occur).

For reference see my fiddle:

.iframe-container {
  height: 400px;
}

<div class="banner">
  Banner
</div>
<div class="iframe-container">
  <iframe src="https://edition.cnn.com/" width="700px" height="100%" scrolling="no">
    
  </iframe>
</div>
<div class="something-else">
  Add here something else eventually...
</div>

JSFiddle

In this example, the height has to be expressed in pixels on the (parent) element with the class called iframe-container in order for the iframe to have a height assigned to it.

Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/187156/discussion-on-answer-by-barrosy-iframe-height-to-full-content). — Samuel Liew, Jan 23 '19 at 01:20

iFrame Height To Full Content

1 Answers1