Question

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

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

然后它就是这样，当页面加载时，它是从窗口底部50vh，而不是整个页面底部的50vh，它延伸到窗口之外。如何从整个页面的底部创建一个50vh的div？感谢。

Answer 1

您可以将body设置为相对位置。只要test元素是直接子元素，它就应该有效。

这是要测试的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

这里有一个小提琴的链接： https://jsfiddle.net/v0kt9hnj/4/

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

1 个答案: