如何相对于文档高度而不是视口高度设置css位置“顶部”？ [复制]答案

【问题标题】：How to set css position 'top' relative to document height instead of viewport height? [duplicate]如何相对于文档高度而不是视口高度设置css位置“顶部”？ [复制]
【发布时间】：2020-01-11 21:47:18
【问题描述】：

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

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

body {  height: 180vh;}

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

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

有没有办法实现我想做什么？甚至不是top 属性。

【问题讨论】：

你可以通过bottom: 0;如果对你有帮助

标签： javascript html css css-position

【解决方案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%;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

首先您需要确保正文的position 属性为relative、absolute 或fixed。
然后，您可以设置 position: absolute 以使元素依赖于具有上述三个属性之一的最后一个父元素。
最后，您可以在此之后设置 top、left、right 和 bottom 属性。

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

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

  &lt;div id="down"&gt;Here&lt;/div&gt;

【讨论】：

【解决方案3】：

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

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

代码sn-p如下：

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>

【讨论】：