CSS 如何定义 div 与页面底部的距离，而不是窗口底部的距离

Question

我有一个页面不适合浏览器窗口，因此用户必须滚动到底部。我想制作一个距离底部 50vh 的div，但如果我这样做：

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

然后它只是使当页面加载时，它距离窗口底部 50vh，而不是从整个页面底部延伸超过窗口的 50vh。我将如何制作一个距离整个页面底部 50vh 的div？谢谢。

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/