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

Question

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

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

这是 div :

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

CSS 为 div :

.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>

Answer 2

我有办法做到这一点

$(document).ready(function() {
  function setHeight() {
  windowHeight = $('.main').innerHeight();
  $('.verticalLineFeed').css('height', windowHeight);
  };

  setHeight();

  $('.main').resize(function() {
  setHeight();
  });
});

代码片段：

$(document).ready(function() {
  function setHeight() {
    windowHeight = $('.main').innerHeight();
    $('.verticalLineFeed').css('height', windowHeight);
  };
  setHeight();
  
  $('.main').resize(function() {
    setHeight();
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="verticalLineFeed">
</div>
<div class="main">
</div>

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

How to set height of a div to height of the screen dynamically till the scrollbar reach bottom of the screen

html

javascript

css

jquery

viewport