0

I had done a lot of research and I'm close to what I wanted to happen. There is this iFrame I have been putting in the front page of my website. The source is from another website.I wanted to keep the height to 100% or full height no matter how short or long the content of the iFrame's content is.

PROBLEM : It does not go to a 100%.

SOLUTION : I found this post -- Full-screen iframe with a height of 100%

RESULT : I'm getting there! But it created another problem. Please see picture below for the demo. PICTURE
- The RED box is the main content or the main page layout.
- The YELLOW box is the iFrame.
- The BLUE arrow and line is where the iFrame should be.

NEW PROBLEM : I'm actually almost there but you see, my iFrame went over the content of the page. It should stay in that blue line. I added a parent div to the iFrame so I can put position:relative but my iFrame disappears. Also, it almost displayed the entire content. Check the code below:

<div style="margin:0px;padding:0px;overflow:hidden;">
     <iframe style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="www.example.com" name="sample" height="150%" width="150%"></iframe>
</div>

NEW SOLUTION : NO, I don't have any new solutions to that. If I can ask you guys to help me out with this. I wanted to achieve a full or 100% display of content of the iFrame without changing the height value if I change my iFrame src. I wanted the height to be flexible no matter how long or short the content is. I tried a JavaScript but according to a lot of posts I have read, it does not work on cross-domain. So yeah. Thanks!

Community
  • 1
  • 1
Monica Negapatan
  • 251
  • 1
  • 14
  • 29
  • " I wanted to achieve a full or 100% display of content of the iFrame without changing the height value if I change my iFrame src " - Are you saying that you don't want to set the iframe height value through JS ? – Diptendu Mar 11 '15 at 05:57
  • One possible approach could be you insert a JS inside the iframe to capture the height. This JS captures the body height and sends to parent page using postMessage or changing window.hash value. Then at the parent page level, you read the value and set the iframe height accordingly. – Diptendu Mar 11 '15 at 06:03
  • I don't want to set the iframe height with pixels but a 100%. 100% is flexible no matter how short or long the content is. I tried using JS, it doesn't work for cross-domain. – Monica Negapatan Mar 11 '15 at 07:24

1 Answers1

0

If all else fails, you can always use a class.

    <style>
img.Class {width:200px; height:autopx;}
</style>

<img src="UrlOfPicture" class="Class" />
atho2292
  • 1
  • 7