Comment régler dynamiquement la hauteur d'un div à la hauteur de l'écran jusqu'à ce que la barre de défilement atteigne le bas de l'écran

Question

J'essaie d'avoir une ligne verticale pour un fil de nouvelles et je cherche une solution pour rendre sa hauteur égale à la l'écran lorsque la barre de défilement atteint dynamiquement le bas de l'écran, car les éléments du fil de nouvelles seront chargés dynamiquement au défilement.

J'ai essayé d'utiliser 100vh et 100% mais alors la hauteur est fixée à la hauteur de la fenêtre.

Voici la div:

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

CSS pour la div:

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

Toute idée de le faire dans CSS3 ou jquery sera utile

Code Snippet:

.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

Utilisez un wrapper et le mettre à 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>

Ou mettre position: relative au body (ont pas testé sur tous les navigateurs bien)

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

J'ai une façon de le faire

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

    setHeight(); 

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

Code Snippet:

$(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>