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.
Related
I have an iframe that I would like to align perfectly within the container on my website. Right now, there is still a border when I inspect the container containing the iframe element:
The iframe is embedded as following:
<style>
iframe {
width: 100%;
min-height: 500px;
}
</style>
<iframe id="myIframe" frameborder="0" height="100%" width="100%"src="path_to_my_file"></iframe>
I would also like for the height of the iframe to automatically be adjusted to the height of the container. That would mean that it would need to be adjusted every time the window size changes, so I would probably need a javascript method. Is there an efficient way to achieve that?
I have to work on a project and I am facing a problem of not removing the scroll from the iframe. actually, I am trying to pass several pages in a single iframe. So the iframe height is not set according to the content.
I tried a lot of javascript code but none of them works.
<iframe src = "" scrolling = "no"></iframe>
<style>
iframe{
overflow: hidden;
}
</style>
Try this, it should disable the scrolling in iframes
I read some online articles and they say that html tag represent the browser window, so html is equals to the browser window size. If the body size is greater than the html size, then the scrollbar will show up. So it is the html element that controls to display the scrollbar or not.
It's like in this picture:
You may think of it like:
html { overflow: auto; }
So if want to hide the scroll bar on purpose, I would do:
// myCSS.css
html { overflow: hidden;// override default }
If I want to scroll to a position of the body:
var position = 500;
$('html').animate({scrollTop: position}, 1000);
This sounds all promising. But I used FireBug to check the height of the html tag, they are always greater or equal than the size of body. (Assuming a default webpage with no css, and contents in body exceed window size) The html tag size is not really the size of the browser window, and it is more of the size of body element.
So where does the scrollbar really come from? How does the scrollbar really work?
I read some online articles and they say that html tag represent the
browser window, so html is equals to the browser window size. If the
body size is greater than the html size, then the scrollbar will show
up. So it is the html element that controls to display the scrollbar
or not.
That's very wrong indeed.¹
What the CSS 2.1 Spec section 9.1.1 says is
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
Yet that doesn't seem quite correct either, since a scroll is not generally provided to move the viewport over areas of the canvas that have a negative x or negative y value, even if content is painted there.
The best I can establish is that the scroll bars are made available to move the viewport over the areas of the canvas which have a rendered box for 0 or positive x and y co-ordinates.
Whatever, neither the size of the html element box, nor the body element box are special. They are just rendered boxes on the canvas, the same as other elements. Other elements may be rendered outside those boxes, because of overflow or absolute positioning and the scroll mechanism will take the full size of those elements into account.
An example and diagram may help understanding. Consider this example:
<!DOCTYPE html>
<html>
<head>
<title>Scroll limits</title>
<style>
html { padding:20px; border:1px green solid; height:80px; }
body { margin:0; border:1px black solid; height:150px; }
#div1 { position:absolute; top:-50px; height:65px; left:-50px;
width: 65px; background-color:blue; }
#div2 { position:absolute; top:200px; height:65px; left: 110%;
width: 65px; background-color:yellow; }
</style>
</head>
<body>
body
<div id="div1">div 1</div>
<div id="div2">div 2</div>
</body>
</html>
JsFiddle
results in this:
¹ The online article probably, and the picture in the question definitely, come from http://phrogz.net/css/htmlvsbody.html. It should be noted that that article was written in 2004. In 2004, what the then draft CSS 2.1 said didn't really matter. What mattered was what IE6 did, and the article does describe what IE6 did.
This works:
html {
height:100%;
width:100%;
overflow: hidden;
}
Scrolling has to do with overflow. When the body overflows the document.documentElement (the html element) the scollbar/bars appear. While other Elements' overflow defaults to visible the html tag defaults to scroll. To answer your question, the scrollbar appears on the parent of the overflowing content, when the parent's overflow is set to scroll, in this case the html tag.
Is it possible to adjust the height of the iframe scroll according to the size of the screen (browser)? It would be like simply replacing the default browser scroll with the iframe scroll. Here is what I mean by this:
I currently have my browser scroll disabled:
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
I have my iframe:
<iframe width="100%" src="http://www.yahoo.com" scrolling="yes" frameborder="0" height="100%">
</iframe>
With width set to 100% the iframe scroll bar is pushed to the far right somewhat replacing the default browser scroll bar and my iframe is now the center piece of the website, (yahoo is an example). I can always adjust the height of the iframe to fit my specific browser size however is there a way I set the iframe scroll according to the browser height automatically? Make it responsive to the browser height just like it is to the width?
If you're using jQuery, you could do $(window).height() and then set the iframe height to it.
Drop this into the bottom of your HTML file, just above the closing </body> tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
;(function($){
$(document).ready(function(){
$('iframe').height( $(window).height() );
$(window).resize(function(){
$('iframe').height( $(this).height() );
});
});
})(jQuery);
</script>
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.