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

Question

我希望div位于屏幕下方，但是当您将其滚动显示时。我可以使用margin-top执行此操作，但这需要一个特定的数字，而我希望它相对于它所在的屏幕，以便在您开始向下滚动所有屏幕时显示。

我该怎么做？感谢。

Answer 1

使用vh：

  

iewport-percentage length定义了相对于视口大小的长度，即文档的可见部分。只有基于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