javascript - 如何动态地将div的高度设置为屏幕的高度，直到滚动条到达屏幕底部

Question

我正在尝试为新闻提要设置一条垂直线，我正在寻找一种解决方案，当滚动条动态到达屏幕底部时，它的高度等于屏幕，因为新闻提要中的元素将在滚动时动态加载.

我尝试使用 100vh 和 100%，但随后高度固定为视口(viewport)的高度。

这是 div :

<div class="verticalLineFeed">
</div>

div 的 CSS:

.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
margin-top: 65px;
}

在 css3 或 jquery 中执行此操作的任何想法都会有所帮助

代码片段:

.verticalLineFeed {
  width: 2px;
  height: 100%;
  border-left: 5px solid #cdcdcd;
  position: absolute;
  margin-left: 32px;
}
.main {
  width: 100%;
  height: 2000px;
  }

<div class="verticalLineFeed">
</div>
<div class="main">
</div>

Answer 1

使用wrapper并将其设置为position: relative

.wrapper {
  position: relative;
}
.verticalLineFeed {
  width: 2px;
  height: 100%;
  border-left: 5px solid #cdcdcd;
  position: absolute;
  margin-left: 32px;
}
.main {
  width: 100%;
  height: 2000px;
  }

<div class="wrapper">
  <div class="verticalLineFeed">
  </div>
  <div class="main">
  </div>
</div>

或者将 position: relative 设置为 body (虽然还没有在所有浏览器上测试过)

body {
  position: relative;
}
.verticalLineFeed {
  width: 2px;
  height: 100%;
  border-left: 5px solid #cdcdcd;
  position: absolute;
  margin-left: 32px;
}
.main {
  width: 100%;
  height: 2000px;
  }

  <div class="verticalLineFeed">
  </div>
  <div class="main">
  </div>