divの高さを画面の高さに動的に設定する方法スクロールバーが画面の一番下に来るまで動的に調整する方法

Question

ニュースフィードの縦線を作成しようとしていますが、ニュースフィード内の項目がスクロールに動的に読み込まれるため、スクロールバーが画面の下部に動的に表示されるときに、

100vhと100％を使用しましたが、高さはビューポートの高さに固定されています。 divのための

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

CSS：

：

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

CSS3やjQueryのでこれを行うための任意のアイデアは役に立ち

コードスニペットになります。ここ

はdiv要素であります

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

またはSET position: relativebodyは

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>

（ただし、すべてのブラウザでこれをテストしていません） 私はこの

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

    setHeight(); 

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

コードスニペット行う方法持っている

Answer 2

：100vh`：

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