Height equal to 100% is not working for IFrame - html

Following by some topics on Stack Overflow like:
Full-screen iframe with a height of 100%
How do you give iframe 100% height [duplicate]
Make Iframe to fit 100% of container's remaining height
I wanted to nest iframe on my web page. I am using bootstrap to style web page, so I used following code:
<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden">
<iframe id="iFrame1" src="<test_link_here>" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</div>
Unfortunately my iframe is not resized to full height. I would like somehow to resize it automatically to full height.
Do you know how I can acheive it?

What you want could actually be done by changing the height : 100%; value to height : 100vh;.The vh is a unit called ViewHeight, and your full screen height is actually 100vh;
Here is a post about length units from the Mozilla team.
Try this code :
<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden">
<iframe id="iFrame1" src="http://www.stackoverflow.com" frameborder="0" style="overflow:hidden;height:100vh;width:100%; border : 1px solid red;"></iframe>
</div>

Related

How to contain a image responsively on an amp page?

As we need to define an image with amp-img tag for an amp page, the problem is with the responsive nature of those image.
For example:
<p align="center"><amp-img width="400px" height="200px" layout="responsive" src="https://xyx.com/abc.png"></p>
Now if the master div is 600px then, the image will get stretched out to 600px (more than its normal 100%), but for a mobile device with master div being 300px , the image will adjust the height and will be perfectly fine as it will get contained in the 300px div stretching it to 100% won't make effect.
Also, layout cannot be set to fixed because it will then stretch out of the mobile display.
What's the solution?
If you have dynamic width of the image and want to handle this situation than go to this link : https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/ and read "Fixed-Height Layout with correct Aspect Ratios" section.
It will help you to implement amp-img when you do not know the image width and do not want the image to be get stretched.
You can do like this :
CSS
<style amp-custom>
.magic-img { max-width:400px; margin: 0 auto;}
</style>
HTML
<div class="magic-img">
<amp-img width="400" height="200" layout="responsive" src="https://xyx.com/abc.png"/>
</div>

Embed an html web-page inside another one and scroll it using the parent scollbar

I would like to have the contents of an html webpage displayed in another (parent) html webpage, stretch the embedded webpage to the width of the parent and also remove the scroll bar of the embedded webpage while being able to scroll down the contents of the embedded webpage using the the scroll bar of the main page as the height of the embedded contents are too long to fit. I tried using code from answers to similar problems including this:
<iframe style='overflow:hidden; width:100%; height:100%' scrolling = "no" src="annotated list of courses.html" frameborder="0" width="100%" height="100%"> </iframe>
but I cannot achieve the desired outcome. I would like is to be able to scroll the contents of the embedded webpage using the scrollbar of the parent page. It is possible (with no need to copy code form the embedded HTML to the parent one instead) and how? Thanks.
I solved the problem by specifying a specific height for the embedded webpage which is greater than or equal to the height of the webpage like this:
<div id="content" class="content content-full" style="margin-top: -40px;">
<iframe style='overflow-y:hidden; width:100%; height:17560px' src="annotated list of courses.html" frameborder="0" width="100%" height="17560px" type="text/html"> </iframe>
</div>
I hope this can solve the problem also for others and any better or different slolution is also appreciated.
ps: You have to specify a height that is at least equal to the height of the contents of the embedded webpage or element for the scrollbar to disappear.
I've solved it by using two DIVs, one inside the other.
<div style="overflow-y: hidden; border: 2px solid black; width: 300px; height: 300px; position:absolute; left: 100px; top: 100px">
<div style="margin-top: -100px; width: 300px; height: 400px">
<iframe scrolling="no" style='pointer-events: none; width:100%; height: 100%' src="https://earth.nullschool.net/#current/wind/surface/level/orthographic=-325.19,32.21,3000/loc=35.073,31.923" frameborder="0" type="text/html"></iframe>
</div>
</div>
I've disabled The scrollbars by setting scrolling="no"
I've diasbled user clicks by setting style='pointer-events: none;'
Here is a working sample - https://jsfiddle.net/q46L1ynv/

Facebook Page Feed - Full Height

Just like the title says. I want to insert a FB page feed that stretches to the end of the window. Is this possible? 800px is the highest it wants to go I think, when I set it on iframe. And I've searched everywhere for an answer, but no luck.
I've used Facebook page plugin, of course. And here's the outline of my code, using Bootstrap 4.
.card {
position: fixed;
width: 340px;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card p-0">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FMercedesAMG&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
Thanks!
The default height can be set through your app dashboard (on the Facebook Developers website). setting it to 'fluid' should allow you to resize it on the fly.
Then you should apply a 100% height to the iframe itself and set a min-height to your container.

How to reposition content in no scroll iframe?

I have an iframe for a google chart which has too much spacing around it. I want to embed this in my page but crop it to get rid of the surrounding space.
I was trying to do this by setting the iframe with smaller height and width attributes but I cannot work out how to reposition the content within the iframe to center it.
Here is the iframe for the chart:
<iframe width="550" height="170" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1r56MJc7DVUVSkQ-cYdonqdSGXh5x8nRum4dIGMN89j0/pubchart?oid=1407844401&format=interactive" onload="window.frames['itunes'].scrollTo(250,250)">></iframe>
How do you reposition the content of an iframe in this way or is there a better solution?
Thanks
You should wrap the iframe in a div or something and position the iframe.
here the code:
<div class="wrapper">
<iframe></iframe>
</div>
and this is the css
.wrapper{overflow:hidden;}
.wrapper iframe{position:relative; left:-40px; top:-30px;}

HTML iframe won't get taller

Trying to embed a blog into our html website with an iFrame #:
<h1 class="title">All the latest...</h1>
</br>
</div>
</div>
</div>
<iframe src ="http://inspireacademy.tumblr.com" width="100%" height="auto">
<p>Your browser does not support iframes.</p>
</iframe>
I've tried changing height to 100%, auto and even numerous fixed widths, however the height of the iframe stays exactly the same! Any help?
Thanks in advance,
Aidan
If you're using a percentage, then the containing element must have a height or the iFrame won't know what to base the percentage on. If you give body 100% height and then give the iFrame 100% height, it will fill the entire height of the window.
Additionally, I would advise against using inline CSS, instead put your CSS rules into a CSS file.
HTML:
<body>
<iframe src ="http://inspireacademy.tumblr.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
CSS:
body {
height:100%;
}
iframe {
height:100%;
width:100%;
}
JSFiddle
You will have to set the height of the containing div. The height auto uses the container the element is in to set the height. Height only works as a percentage when it is in a container.
<h1 class="title">All the latest...</h1></br>
</div>
</div>
</div>
<div style="height:400px;">
<iframe src ="http://inspireacademy.tumblr.com" width="100%" height="auto">
<p>Your browser does not support iframes.</p>
</iframe>
It will then scale to the container.