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

Dynamic resizing of an element between the bottom of a webpage and close to top

本文关键字：元素 之间 顶部 调整 网页 底部 动态      更新时间：2023-09-26

我试图得到一个iframe动态调整150px从网页的顶部，并去到网页的底部，无论什么高度有人的浏览器是。正文的宽度和高度都设置为100%，并隐藏溢出。

如果我的问题仍然没有意义，这里有一些视觉效果iframe应该始终位于底部，距顶部150px，并且您应该始终能够在iframe中看到底部元素的内容。

这是一个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();
})

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

如果你需要一个非js的解决方案，尝试将iframe包装到div中，并使用css:

div{
    position: absolute;
    top: 150px;
    bottom: 0;
    right: 0;
    left: 0;
}
iframe{
    width: 100%;
    height: 100%;
}
相关文章：