如何相对于文档高度而不是视口高度设置 css 位置 'top'？

Question

我会尽量让我的问题更清楚。

因为我在 Html 正文中使用了以下设置，所以我需要向下滚动页面才能到达页面底部。

body {  height: 180vh;}

并且我想设置一个div相对于文档高度的位置top属性，这样我就可以把它的位置控制在只有当我向下滚动时才能看到的地方。我更喜欢按百分比值设置它，这样代码将适应不同尺寸的设备。

但是默认top 属性是相对视口的，所以我无法通过设置top值来实现。

有没有办法实现我想做的事情？即使不是 top 属性.

Answer 1

如果你给 body position: relative 和 div position: absolute，你可以将 top 属性设置为百分比，其中 top: 100% 将其置于页面底部：

body {  
  height: 180vh;
  background: lightblue;
  position: relative;
}

div{
   height: 30px;
   width: 140px;
   border: solid 2px gray;
   background: white;
   position: absolute;
   top: 100%;
}

<div></div>

Answer 2

首先你要确定body的position 属性是relative, absolute还是fixed.
然后，您可以设置 position: absolute 以使该元素依赖于具有上述三个属性之一的最后一个父元素。
最后，您可以在此之后设置 top、left、right 和 bottom 属性。

body {
  height: 180vh;
  position: relative;
}

#down {
  position: absolute;
  // or bottom: 10%;
  bottom: 25px;
}

  <div id="down">Here</div>

Answer 3

如果我正确理解你的问题，有两种方法

使用padding-top
使用position:absolute和top

下面的代码代码段：

body {
  height: 180vh;
}

.myDiv1 {
  margin-top: 110vh;
  height: 100px;
  width: 100%;
  background: lightblue;
}

.myDiv2 {
  position: absolute;
  top: 150vh;
  height: 100px;
  width: 98%;
  background: lightpink;
}

<body>
  <div class='myDiv1'></div>
  <div class='myDiv2'></div>
</body>

如何相对于文档高度而不是视口高度设置 css 位置 'top'？

How to set css position 'top' relative to document height instead of viewport height?

html

javascript

css

css-position