iframe reaches bottom of page

问题

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>

回答1:

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/

回答2:

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.

回答3:

<!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

回答4:

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

回答5:

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>

回答6:

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>

回答7:

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>

回答8:

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

回答9:

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

回答10:

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

来源：https://stackoverflow.com/questions/13146793/iframe-reaches-bottom-of-page

标签

html

iframe

styles

height