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

Question

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

如果我的问题仍然没有意义，这里有一些视觉效果 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();
})

Answer 2

用于$(window).dimension();获取窗口的尺寸。用于$("#my_iframe").css();设置高度和宽度。

Answer 3

如果您需要非 js 解决方案，请尝试将 iframe 包装到 div 中并使用 css：

div{
    position: absolute;
    top: 150px;
    bottom: 0;
    right: 0;
    left: 0;
}
iframe{
    width: 100%;
    height: 100%;
}