Geek Answers Handbook

Iframe reaches bottom of page

Is there any way that the height of the <iframe> reaches exactly the bottom of the page? It's hard to judge using height:xx% , and this may be browser dependent.

Code 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>
+7
source share
10 answers

Using JavaScript / jQuery, you can precisely set the correct dimension for the IFRAME element without having to access the DOM of the frame itself (cross-domain access problems), 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/

+7
source

As annoying the use of tables for layout is, they are still the best way to process vertical dimensions sequentially. 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 as close as I was 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 table elements, you can get some traction from div tags with display:table , display:table-row and display:table-cell , but be prepared for even more annoying quirks in some browsers.

+1
source 
 <!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, that seems complicated, but to achieve this 21> OR <body> tag height is 100%

0
source

If the content of the <p> fixed, you can try this way by adjusting the height of <p> and <iframe> relative to .. and you must maintain <html> OR <body> height of the tag 100%, otherwise it will not work

0
source

I have had this same problem recently. I believe that you want to increase the height to fit dynamically loaded content. It 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>
0
source

Iframe, which is a child of the body, is 100% high, and the parent, and before you can make the iframe full page, you need to declare the height of the body and make it full.

Try it. (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>
0
source

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>
0
source

Try it...

 <!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 can check the demo here.

0
source

You can not. I tried this before, but this is an iframe problem, it will remain so until it finds a way to expose the height of the internal html document ... by standards. If you delete the DOCTYPE of an internal document, I think you will have some access to it. Make Iframe equal to 100% of the remaining container height

0
source

I always used the height: 100vh; to provide you 100% view port

0
source

More articles:


All Articles