iframe reaches bottom of page

Question

Is there a way to make the height of the <iframe> reach exactly the bottom of the page? It is hard to judge by using height:xx%, and it might be dependent on browser.

The code is below:

<!DOCTYPE html>
<html>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%"></iframe>
</body>
</html>

It doesn't work.. it just sets the height to the height of the whole screen. But since there's the paragraph `
..
`, the bottom of the iframe falls off the screen. — John, Oct 31 '12 at 00:17
Can you add any HTML? And/or, are those your entire page contents? — A.M.K, Nov 02 '12 at 00:08
@A.M.K You can change anything as long as the output is as desired. — John, Nov 02 '12 at 00:32
Possible duplicate: http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space — user123444555621, Nov 02 '12 at 08:25

score 8 · Accepted Answer · answered Nov 08 '12 at 11:31

8

Using JavaScript/jQuery, you can precisely set the right dimension for the IFRAME element, without the need to access to DOM of the frame itself (cross-domain issues), relying on tables or absolute positioning (useless if the content above the frame is dynamic in height):

$(function() {
    var aboveHeight = $("#aboveFrame").outerHeight(true);
    $(window).resize(function() {
        $('#frame').height( $(window).height() - aboveHeight );
    }).resize();
});

Example: http://jsfiddle.net/hongaar/jsdYz/

answered Nov 08 '12 at 11:31

Joram van den Boezem

1,104
10
24

I tried it locally and it looks [pretty much perfect](http://jsfiddle.net/ZLuRE/). – kush Nov 08 '12 at 20:44
But but it has no magic! I thought it is html\css magic special olympics then you came with js-hammer and took the prize :) – JAre Nov 14 '12 at 05:56

score 1 · Answer 2 · answered Nov 08 '12 at 00:42

As annoying as it is to use tables for layout, they're still the best way to consistently handle vertical dimensions. The following still displays a few white pixels around the edge of the iframe, and has an extra scrollbar in some versions of Firefox, but is as close as I've been able to achieve:

<!DOCTYPE html>
<html style="padding:0; margin:0; height:100%">
  <body style="padding:0; margin:0; height:100%">
    <table style="border:0; padding:0; margin:0; height:100%; width:100%">
      <tr style="border:0; padding:0; margin:0">
        <td style="border:0; padding:0; margin:0">
          <p style="margin:10px"> hello </p>
        </td>
      </tr>
      <tr style="border:0; padding:0; margin:0">
        <td style="border:0; padding:0; margin:0; height:100%">
          <iframe src="http://www.weather.com" style="border:0; padding:0; margin:0; width:100%; height:100%"></iframe>
        </td>
      </tr>
    </table>
  </body>
</html>

If you really want to avoid the table elements, you might get some traction out of div tags with display:table, display:table-row, and display:table-cell, but be prepared for even more annoying quirks in certain browsers.

score 0 · Answer 3 · answered Oct 31 '12 at 13:13

0

<!DOCTYPE html>
<html style="height:100%">
<body style="margin:0; >
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:100%"></iframe>
</body>
</html>

Well, this seems to be a tricky but you have to keep <html> OR <body> tag height 100% to achieve this

answered Oct 31 '12 at 13:13

SidPen

182
1
14

Does not work.. it just sets the height to the height of the whole screen. But since there's the paragraph `
..
`, the bottom of the iframe falls off the screen. – John Oct 31 '12 at 23:28

score 0 · Answer 4 · answered Nov 01 '12 at 05:27

0

If your <p> tag content is fixed then you can try this way by adjusting the height of <p> and <iframe> relatively..and you have to keep <html> OR <body> tag height 100% otherwise it wont work

answered Nov 01 '12 at 05:27

SidPen

182
1
14

In your jsFiddle link, the iframe clearly does not reach the bottom of the page... – John Nov 01 '12 at 15:35

score 0 · Answer 5 · answered Nov 03 '12 at 19:20

I had this same problem recently. I believe you are wanting to expand the height to fit the content that is dynamically loaded. This works like a dream. :)

<!--This script will auto size the height.  Must set the id for it to work.-->      
<script type="text/javascript">
<!--//
 function sizeFrame() {
 var F = document.getElementById("myFrame");
 if(F.contentDocument) {
 F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
 } 
 else {
  F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
 }

 }

 window.onload=sizeFrame; 

//-->
</script>

This is only possible for same-domain iframes. – Joram van den Boezem Nov 08 '12 at 11:20 — Joram van den Boezem, Nov 08 '12 at 11:20

score 0 · Answer 6 · answered Nov 04 '12 at 16:53

Iframe which is a child to the body element is of 100% height with it's parent and before you can make iframe full page you have to declare the height of the body and make it full page too.

Try this. (I thought it would be better if you put your CSS in an external file or just inside the head)

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {height:100%;}
iframe {height:100%;width:100%;}
</style>
</head>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com"></iframe>
</body>
</html>

JAre · Answer 7 · 2012-11-07T06:22:53.633

Demo

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    html, body 
    { 
        height: 100%;
        margin:0px;
        padding:0px;    
    } 

    #divHeader
    {
        height:25px;

    }
    #divContent
    {   
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    height:100%;
    width:100%;
      margin-top:-25px;
    padding-top:25px;
    overflow:hidden;    
    }
    iframe
    {
        width:100%;
        height:100%;
    }
    </style>
    </head>
    <body>
    <div id="divHeader">
        header
    </div>
    <div id="divContent">
    <iframe src="http://www.weather.com"></iframe>
    </div>
    </body>
    </html>

score 0 · Answer 8 · edited Nov 09 '12 at 05:36

0

Try this...

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body 
      { 
        height: 100%;
        margin:0px;
        padding:0px;    
      } 
    </style>
</head>
<body>
<iframe src="http://www.weather.com" onload="this.height = document.body.offsetHeight;"></iframe>
</body>
</html>

You could check the demo here

edited Nov 09 '12 at 05:36

Vimalnath

6,373
2
26
47

answered Nov 08 '12 at 16:03

Ayyappan Sekar

11,007
2
18
22

score 0 · Answer 9 · edited May 23 '17 at 12:02

0

you can't. I tried this before, but it is an issue with the iframe it will remain this way, until they find a way to expose the height of the inner html document... following the standards. If you remove the DOCTYPE of the inner document, I guess you'll have some access to it. Make Iframe to fit 100% of container's remaining height

edited May 23 '17 at 12:02

Community

1
1

answered Nov 08 '12 at 23:19

ChuckE

5,610
4
31
59

score 0 · Answer 10 · answered Sep 01 '16 at 18:29

0

I have always used height:100vh; to give you 100% of the view port

answered Sep 01 '16 at 18:29

Eric322

1
2

It would be wise to remember that there is still a prevalent iOS bug when using `vh` - have a look at http://caniuse.com/#feat=viewport-units – Frits Sep 01 '16 at 18:52
oh thanks! I didnt know Ill take a look at it then. It works for me at the moment though – Eric322 Sep 02 '16 at 14:17

iframe reaches bottom of page

10 Answers10

Linked