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;">
<ifram开发者_高级运维e 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.
加载中,请稍侯......
精彩评论