CSS如何定義距頁面底部而不是窗口底部的div距離？

Question

我的頁面不適合瀏覽器窗口，因此用戶必須滾動到底部。 我想從底部開始創建一個50vh的div，但是如果執行此操作：

    .test{ 
       position: absolute;
       bottom: 50vh;
    }

然后，它只是使頁面加載時距離窗口底部50vh，而不是整個頁面底部50vh（延伸超過窗口）。 我如何將整個頁面底部的div設為50vh？ 謝謝。

Answer 1

您可以將body設置為相對位置。 只要test元素是直接子元素，它就應該起作用。

這是要測試的代碼：

 body { position: relative; } .pusher { height: 1000px; background: red; } .test { height: 50px; background-color: green; bottom: 50vh; position: absolute; left: 0; right: 0; width: 100%; } 

 <div class="test"> </div> <div class="pusher"> </div> 

這是小提琴演奏的鏈接： https : //jsfiddle.net/v0kt9hnj/4/