Question

我正在尝试让iframe从网页顶部动态调整150px的大小，然后深入到网页的底部，无论某人的浏览器是什么高度。在隐藏溢出的情况下，正文的宽度和高度都设置为100％。

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

Answer 1

这是一个Jquery解决方案：

使用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%;
}

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

3 个答案: