設置div相對於屏幕分辨率的頁邊距

Question

我希望將div定位在屏幕下方，但是當您滾動到時會出現。 我可以使用margin-top做到這一點，但這需要一個特定的數字，而我希望它相對於它所在的屏幕，以便當您開始在所有屏幕上向下滾動時顯示它。

我怎樣才能做到這一點？ 謝謝。

Answer 1

使用vh ：

即，百分比長度定義了相對於視口大小（即文檔的可見部分）的長度。 修改視口大小時（通過修改台式計算機上的窗口大小或通過在手機或平板電腦上打開設備），只有基於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

在這里看看