We Keep Coding

How do I make the iframe resolution responsive to fully fit the iframe that it is in?

iframe-screenshot
The image shows to iframes, sometimes I need to show 3 iframes.
My goal is to make it so that the iframes are all responsive inside.
Here is my current css styling:
iframe {
width: 100%;
height: 100%;
}

you can like this:
if you have class,you can delete,the src is the page you want to display
<iframe class="" src="" style="width:100%;height:100%;"></iframe>

Hide scrollbar from iframe and replace it with scrollbar on the page

I have iframe with vertical scrollbar. I need to remove it and have this scollbar at the the page. So, when I need to scroll the content of the iframe, I can use the page scrollbar.
I did hide the the vertical scrollbar from the iframe but now, I don't have it at all.
I use:
iframe::-webkit-scrollbar {
display: none;
}
And this works only with google chrome but it doesn't work with firefox and Internet Explorer. I tried all the following:
iframe::-moz-scrollbar {display:none;}
iframe::-o-scrollbar {display:none;}
iframe::-google-ms-scrollbar {display:none;}
iframe::-khtml-scrollbar {display:none;}
But they didn't work.
So, I need your help to hide the scrollbar from iframe with all browsers.
And have the ability to scroll the iframe's content from the scrollbar of the page.
Thank you

Depending on the version of IE, sometimes using iframe {overflow: hidden;} will hide the scrollbar. But putting scrolling="no" in your iframe usually works on all browsers.

You can add JavaScript to the page within the IFRAME to, on load and on resize, set the height of the IFRAME within the parent. The page will need to exist within the same domain as the parent, although you may be able to overcome this with browser security settings.
Within the page (example uses jQuery):
if (window != window.parent)
$(function() {
var resize = function() { $(window.parent.document).find("IFRAME[name='" + window.name + "']").height($(document).height()); };
$(window.parent).resize(resize);
resize();
});
You will need to give the iframe a name on the parent page:
<iframe name="anything" ...></iframe>

This seems to work just fine:
Html 5/CSS
.ifm {
width: 1200px;
height:800px;
overflow-y: hidden;
}
<iframe src="https://bing.com"
class="ifm"
scrolling="no"
seamless="seamless">
</iframe>
Based on this post.

HTML Iframe within page content

I have a huge content in an HTML page and i want to put the same within iframe. But putting the content within iframe tag within page, page shows that part as blank. Please suggest how does we put content within iframe in the same HTML. What should be placed in src if applying the same page content.
<iframe src="">
//Content
</iframe>
Thanks.

I strongly recommend that if you want to place a large section of your current page's output into a scrollable area of your page, don't use an iframe, instead do something like this:
<div style="overflow-y: auto; width: 100%; height: 400px;">
<!-- put all of your large amount of content after this comment, before the closing div tag -->
<p>this is my huge amount of content (just an example.... you'd have hundreds of lines of code here I suspect</p>
</div>
Of course you can change the height and width of the div to suit your needs.
the div style="overflow-y: auto;" with a specified width and height should (I think) create a scrollable area in your page similar to the output of an iframe, but without requiring the browser to load two copies of the contents. Also you avoid the possibility of an infinite loop.
you could also add a border around the area if you like, for example after height: 400px; by changing the first line to this:
<div style="overflow-y: auto; width: 100%; height: 400px; border: 2px solid grey;">

You would put the link to the page you need to display the content from
<iframe src="http://www.yoursite.com"></iframe>
src = URL potentially surrounded by spaces Gives the address of a page
that the nested browsing context is to contain.
read up on iframes

Say for example all of your HTML is inside index.html, simply set the src attribute to index.html.
Like so:
<iframe src="index.html"></iframe>
Remember, this doesn't necessarily work correctly as you'll run the <iframe> into a continuous loop. Though, correct me if I'm wrong, it will only repeat the iframe twice as a security policy.

<iframe src="URL or pagename.html"></iframe>

JS - iframe height with 100% and no scroll (Scroll-y in body)

I have an iframe problem. firstly I search the keyword iframe height in https://stackoverflow.com/search?tab=relevance&q=iframe%20height but I did not find someone I need.
How to make an iframe wicth height with 100% and no scroll. Scroll-y in body.
<body style="scroll-x:hidden;scroll-y:auto;">
<iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>
And if I search something via http://www.google.com in the iframe, after turn to the google search result page. the iframe will calculate the new height and still with iframe height 100%, the scroll bar in the body part. (I wish some help could work perfect not only in ie and firefox, but also in safari and chrome ). Thanks a lot.

This should do what you're looking for:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<style type="text/css" media="screen">
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
* {
padding: 0;
margin: 0;
}
iframe {
width: 960px;
height: 100%;
overflow: hidden;
border: none;
}
</style>
</head>
<body>
<iframe src="http://google.com" scrolling="no"></iframe>
</body>
</html>
The keys here are to:
Make the BODY and HTML elements 100% of the browser window so when you make the iFrame 100%, it has something to be 100% of.
Set the BODY and HTML elements to overflow:hidden so that no scrollbars are shown
Make sure there is no padding
Hope that helps

Use my JQuery Plugin :
$.fn.resizeiframe=function(){
$(this).load(function() {
$(this).height( $(this).contents().find("body").height() );
});
$(this).click(function() {
$(this).height( $(this).contents().find("body").height() );
});
}
then , use it as following :
$('iframe').resizeiframe();
Don' forget to adjust attributes of iframe as following :
<iframe
src="islem.html"
frameborder="0"
width="100%"
marginheight="0"
marginwidth="0"
scrolling="no"
></iframe>

I was searching for the same effect and I found a way. If you look with 'examine element' in Chrome (or firebug) in the metrics section, then select the <html>. You should see if the html area is smaller than the whole document. If you set the html at height: 300%, it should work. Here are the important features:
html {height:300%;
}
body {height:100%;
}
#frame {height:90.74074074074074%;}
***watch for any max-height you might have coded, it would screw the effect up.
In my case, I had to split the frame height with another element in my container, so it could fully strech without scrollbars appearing. So I had to calculate the % of height remaining in my container, using firebug.
------- Another way, easier:
Try not specifying any height for BOTH your html documents,
html, body {}
then only code this:
#some-div {height:100%;}
#iframe {height:300%;}
note: the div should be your main section.
This should relatively work. the iframe does exactly calcultes 300% of the visible window height. If you html content from the 2nd document (in the iframe) is smaller in height than 3 times your browser height, it work. If you don't need to add content frequently to that document this is a permanent solution and you could just find your own % needed according to your content height.

Bubbling events from HTML elements down into iframe

I have an iframe that acts as a big button. The entire content inside of the iframe is one click target.
What I'd like to do is hover some piece of HTML over the iframe kind of like in this example.
<html>
<head>
<style>
iframe {
height: 100px;
width: 300px;
}
div {
position: relative;
}
a {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<iframe src="frame.html"></iframe>
<a id="text">Image</a>
</div>
</body>
</html>
You can also see a live example here http://dev.gjcourt.com/iframe
The problem is that I'd like to have click events from the anchor bubble down into the iframe. Is there any way to make this possible?

Position the iframe absolutely, make the background of the iframe transparent and give it a z-index higher than the text/other content.
Why are you using an iframe for this?

This is an example of possible Clickjacking and most browsers attempt to prevent it.

As #Zikes mentioned this is a clickjacking attack, but it is still possible nowadays. All you need to do is to overlay your iframe with SVG element and set pointer-events="none", so it will flow all cursor events through SVG element down to iframe. You can find more examples and crossbrowser solutions in this article.