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

Javascript 如何将div的高度动态设置为屏幕的高度,直到滚动条到达屏幕底部,javascript,jquery,html,css,viewport,Javascript,Jquery,Html,Css,Viewport,我试图有一个新闻饲料垂直线,我正在寻找一个解决方案,使其高度等于屏幕时,滚动条到达屏幕底部的动态作为新闻饲料中的项目将动态加载到滚动 我尝试使用100vh和100%,但高度固定为视口的高度 这是分区: <div class="verticalLineFeed"> </div> .verticalLineFeed { width: 2px; height: 100%; border-left: 5px solid #cdcdcd; position: absolute;

我试图有一个新闻饲料垂直线,我正在寻找一个解决方案,使其高度等于屏幕时,滚动条到达屏幕底部的动态作为新闻饲料中的项目将动态加载到滚动

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

这是分区:

<div class="verticalLineFeed">
</div>
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
margin-top: 65px;
}
在css3或jquery中实现这一点的任何想法都会有所帮助

代码段:

.verticalLineFeed{ 宽度:2倍; 身高:100%; 左边框:5px实心cdcdcd; 位置:绝对位置; 左边距:32px; } 梅因先生{ 宽度:100%; 高度:2000px; } 使用包装器并将其设置为位置:相对

.包装纸{ 位置:相对位置; } .verticalLineFeed{ 宽度:2倍; 身高:100%; 左边框:5px实心cdcdcd; 位置:绝对位置; 左边距:32px; } 梅因先生{ 宽度:100%; 高度:2000px; }
我有办法做到这一点

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

  setHeight();

  $('.main').resize(function() {
  setHeight();
  });
});
代码段:

$document.readyfunction{ 函数设置高度{ windowHeight=$'.main'.innerHeight; $'.verticalLineFeed'.css'height',windowHeight; }; 设定高度; $'.main'.resizefunction{ 设定高度; }; }; .verticalLineFeed{ 宽度:2倍; 身高:100%; 左边框:5px实心cdcdcd; 位置:绝对位置; 左边距:32px; } 梅因先生{ 宽度:100%; 高度:2000px; }
你试过最小高度:100vh吗?是的,那不起作用,那么你需要发布一个最小的代码片段来重现这个问题,否则我们除了guessing@LGSon创建…从.main删除高度:2000px似乎有效?我发布了两个示例,每个示例都比使用脚本更有效,我建议你在有CSS方式的时候不要使用它