Menu
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.
620
Automatically Adjust iFrame Height According to its Contents Using JavaScript Topic: JavaScript / jQuery Prev | Next Answer: Use the contentWindow Property You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear.
scrollHeight : This property defines the entire height of an element in pixels, the element is iframe. scrollWidth : This property defines the entire width of an element in pixels, the element is iframe. Another way set the height and width of the iframe to fit with content is to set the Height and Width to 100%,
It is difficult to set the size of the content in the iframe tag as same as the main content. So its need to be dynamically set the content size when the content of iframe is loaded on the web page. Because its not possible to set the height and width all the time while the same code execute with a different content.
The problem with iFrames is that you don’t always know their full height. Also, their height can change unexpectedly. When that happens, an unattractive scrollbar gets added next to the content – and the content no longer looks like it is a natural part of the parent webpage.
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:
Hope that helps
181
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
