javascript - 在网页底部和接近顶部之间动态调整元素的大小

Question

我正在尝试让 iframe 从网页顶部动态调整 150px 的大小，并向下移动到网页底部，无论某人的浏览器的高度如何。 body 的宽度和高度都设置为 100%，并 overflow hidden 。

如果我的问题还是没有意义here are some visuals iframe 应始终位于底部，距离顶部 150 像素 - 您应该始终能够在 iframe 中看到底部元素的内容。

Answer 1

这是一个 Jquery 解决方案:

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;

}

#frame位置不需要固定!

此外，我建议将其包装为一个函数并在窗口调整大小时触发，如下所示:

$(window).resize(function(){

whateverYouCalledIt();
})