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

javascript iframe height

66,023

Solution 1

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

Solution 2

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>

Solution 3

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.

66,023

Author by

cj333

web develop, sports, music, all without Borders.

Updated on February 08, 2020

Comments

cj333 about 4 years
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.
cj333 almost 13 years

so... the body have no scroll-y. If I search something in the iframe, I can only see the top few rows results, how do I see the rest?
Jesse Bunch almost 13 years

Sorry, if you need to be able to scroll the body vertically, simply remove the overflow: hidden in the stylesheet rules for body, html.
cj333 almost 13 years

I have tried, not work, the iframe height = browser height, so the scroll-y is not useful :( I think it is over work for css...
WebDude0482 about 5 years

This will most likely create a cross-origin block if requesting something outside your domain.