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

Question

我正在尝试为新闻Feed设置垂直线，并且正在寻找解决方案以使其高度等于当滚动条到达屏幕底部时动态显示新闻Feed中的项目将在滚动中动态加载的屏幕。

我尝试使用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>