iframe reaches bottom of page
height, html, iframe, styles
Solution
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/
Problem
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> ```