HTMLスクロールしているウェブページの左端から右端まで延長

Question

私のウェブサイトに左のバーを作成しようとしています。現在のところ、可視ウィンドウの下にのみ表示されます。ウェブページを下にスクロールすると、左のバーの下端が表示されます。言い換えれば、ページの一番下までは行きません。私はウェブページをスクロールするために、この左のバーが必要ですが、また、最下位に行く。

div.sideBar { 
    position: absolute; 
    z-index: 1; 
    height: 100%; 
    max-width: 210px; 
    width: 18%; 
} 

私もキャンバスがWebページの背景に固定しています：その後

<canvas id="backgroundCanvas" style="display:block; position:fixed; 
    width:100%; height:100%; top:0; left:0"></canvas> 

、私のサイドバー：

<div class="sideBar"> Some links are here </div> 

ここに私のコードの簡易版であります次に、私のウェブページの主要部分は、画面の一番下までずっと下に広がっています。

<div style="position:relative; z-index:1; width:1100px; 
    max-width: calc(65% - 40px); height:100%; margin:0 auto;"> 

    500 lines of text that you need to scroll down to see. 
    The left bar should extend all the way to the bottom of this. 
</div> 

左、右、上、下を0に設定してみましたが、動作していないようです。私は位置を試みた：固定も、これは私が探しているものではありません。左のバーはページの他の部分と通常スクロールする必要があります（取り付けられているかのように）。

Answer 1

CSSのコードは次のとおりです。私はしぶしぶ問題を解決するためにJavaScriptに頼っ

div.sideBar { 
 
    position: absolute; 
 
    z-index: 1; 
 
    height: 100%; 
 
    max-width: 210px; 
 
    width: 25%; 
 
    overflow-y: scroll; /* or auto */ 
 
}

<div class="sideBar"> Some links are here</div>

Answer 2

div.sideBar { 
    position: fixed; 
    z-index: 1; 
    height: 100%; 
    max-width: 210px; 
    width: 18%; 
    overflow-y: scroll; 
    } 

Answer 3

。私は答えに感謝

var body = document.body; 
var html = document.documentElement; 
var leftBar = document.getElementById("sideBar"); 
function setLeftbarHeight() { 
    var height = Math.max(body.scrollHeight, body.offsetHeight, 
       html.clientHeight, html.scrollHeight, html.offsetHeight); 
    leftBar.style.height = height + "px"; 
} 
//slight delay before setting the height of the left bar because 
// it may take a split second before the full length of the page is loaded 
setTimeout(function(){ 
    setLeftbarHeight(); 
}, 200); 
setTimeout(function(){ 
    setLeftbarHeight(); 
}, 600);