如何動態設置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>