设置相对于屏幕分辨率的div的margin-top

Question

我想要一个div定位在屏幕下方，但是当您将其滚动显示时。我可以使用margin-top来做到这一点，但这需要一个特定的数字，而我希望它是相对于它所在的屏幕，以便它在您刚开始在所有屏幕上向下滚动时出现。

我该怎么做？谢谢。

Answer 1

使用vh：

iewport百分比长度限定的长度相对于视口的大小，也就是可见光文件的一部分。当修改视口的大小（通过修改桌面计算机上的窗口大小或通过在手机或平板电脑上打开设备）时，只有基于Gecko的浏览器动态更新视口值。

#myEl { 
    position: absolute; 
    top: 100vh; 
} 

文档：https://developer.mozilla.org/en-US/docs/Web/CSS/length

演示：http://jsfiddle.net/tusharj/g8pfow8r/

Answer 2

这可以使用position:fixed进行处理，并使用top代替margin-top

div { 
    position:fixed; 
    top:100px; 
} 

Answer 3

如果你正在使用jQuery，您可以在JavaScript中使用它这样，也window.resize

 var windowHeight = window.innerHeight; 
     $("#box").css('position','absolute'); 
     $("#box").css('top',windowHeight+'px'); 

Answer 4

viewport值可帮助您定义相对于屏幕大小的属性：

margin-top:20vw; 

JSFiddle

看看here