HTML iframe won't get taller - html

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.

Related

height="100%" works with <object> but not with <img>, difference HTML vs CSS width/height property?

I've got two codes and I don't know why the use of height=100% works only on image? in other cases it does nothing and the content choose the minimum height
the object ignore it but not the image.
<section id="corps">
<object data="images/test.pdf" type="application/pdf" width="100%" height="100%">
</object>
<img src="images/test.png" width="90%" height="90%">
</section>
And plus, Why width and height property works in html without style = "..." but others like min-height needs it. Is it just because html support these?
Thanks!
<style>
#corps{ height: Xpx} //replace X with the value that suits you
#corps object{height: 100%} //Now you'll get the 100% height
</style>
Alternatively, if you use position: absolute then height: 100% will work just fine.
About why <img src="images/test.png" width="90%" height="90%"> works, because height and width are HTML5 properties for images.
You can achieve the same thing by using <img src="images/test.png" style="width: 90%; height: 90%;">, Now this is CSS.

Height equal to 100% is not working for IFrame

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>

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;}

How can I make an iFrame next to another iFrame?

Currently the way the code works is that it places the iFrame on the bottom on the bottom. I want the last two iFrames to be next to each other so that one can hold, lets say a menu and the other can hold another web page. They would need to be adjacent to each other. That is side by side (no pun intended)
Someone suggested float : left. I tried this and it did float left but it floated the iFrame above it one to the left and not the current iFrame.
Code:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" width="600" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="http://www.w3schools.com" width="200" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
//I want this right next to the second iframe that is 400 width
//which would fill the rest of the screen
<iframe src="http://www.w3schools.com" width="400" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
New Code:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" width="600" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="http://www.w3schools.com" width="200" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
//I want this right next to the second iframe that is 400 width
//which would fill the rest of the screen
<iframe src="http://www.w3schools.com" width="400" height="500" float : right>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
easily done, you just need to set the display to inline-block for those two iframes.
iframe:nth-child(2),iframe:nth-child(3){
display:inline-block;
}
here's an example.
iframes are somewhat frowned upon. You might like to consider using divs with ajax instead, utilizing the jquery $.load function to load whatever you like into them. You can read up on that here.
Hope that helps...
Here is my attempt... The width of the window has to be more than 600px for the last 2 iframe to be beside each other. I used a div with clear:both; to make sure the last 2 iframe are under the first iframe
CSS:
body{
margin:0;
padding:0;
width:100%;
}
HTML:
<body>
<iframe src="http://www.w3schools.com" width="600" height="200" style="float:left;"></iframe>
<div style="clear:both;"></div>
<iframe id="test" src="http://www.w3schools.com" width="200" height="500" style="float:left"></iframe>
<iframe id="test1" src="http://www.w3schools.com" width="400" height="500" style="float:left"></iframe>
</body>
DEMO
You can set the two lower iframes to be side-by-side by giving them the display: inline-block style, as lukeocom mentioned above.
However, you should also then give them box-sizing: border-box and wrap them in a div with style display: table so that their width includes the size of the border, or else they won't line up well with the top iframe, as in lukeocom's example.
Here's what I mean:
http://jsfiddle.net/L87PE/1/
Having done that, you could even give them widths as a percentage, eg. width: 34% and width: 66%, and have them fill the whole browser:
http://jsfiddle.net/L87PE/

IFrame scroll bars not coming on Chrome

I am using an IFrame to make show some content from some other domain. The problem is that I can use a specified height and width (which I am using) and the content inside the IFrame cannot be accommodated completely in the IFrame. Hence, I need scrollbars.
I used the following html code -
**<iframe style = "overflow-x:scroll; overflow-y:scroll;" src = "http://shopsocial.ly/merchant/fanpage?merchant_name=cafepress"
height = "400" width = "500">**
This works fine in Firefox. But in Chrome I'm not getting any scrollbar in the IFrame. I have searched this problem and have tried many things all of which did not solve my problem. Can someone help me with this?
In your iframe content add inline:
<body style="overflow:auto;">
or in the css file attached to the iframe
html, body {
overflow:auto;
}
and of course as recommended by Tom make sure you use scrolling="yes" and style="overflow:visible;" on the iframe:
<iframe scrolling="yes" src="http://example.com" style="overflow:visible;"></iframe>
If it still does not work then try to wrap the iframe like this:
<div style="overflow:visible; height:400px;">
<iframe scrolling="yes" src="http://example.com" style="overflow:visible; height:2000px;"></iframe>
</div>
Instead of using the CSS style you could use the scrolling property of the iframe and set it to yes (i.e. always display scrollbars):
<iframe scrolling="yes" src="http://domain.com" height="400" width="500"></iframe>
Yap Tom is absolutely right you can use
<iframe style="overflow:visible; width:400px; height:400px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="yourfile.html"></iframe>
and it should be work as i have tested.
If it still does not work then update Chrome to latest version. :)
To make this scrollable on all mobile devices (specially iPhone devices), you will need to add CSS to the div around the iframe:
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe scrolling="yes" src="http://example.com" height="400" width="500">Loading...</iframe>
</div>