Question

I’m trying to get an iframe to dynamically resize 150px from the top of a webpage, and go down to the bottom of the webpage, no matter what height someone’s browser is. The width and height of the body are both set to 100% with overflow hidden.

If my question still doesn’t make sense here are some visuals
The iframe should always be at the bottom and 150px from top- and you should always be able to see the content of the bottom element within the iframe.

Answer 1

here is a Jquery solution:

jsfiddle

Javascript:

$(document).ready(function(){

var winHeight = $(window).height();

var frameHeight = winHeight - 150;

$("#frame").css("height",frameHeight+"px");

});

HTML – css

<iframe id="frame" src="http://goawaymom.com/messages.html"  />

#frame{
position:fixed;
top:150px;
overflow-x:scroll;

}

The #frame position does not need to be fixed!

Also I would advise wrapping it as a function and firing on window resize like so:

$(window).resize(function(){

whateverYouCalledIt();
})