HTML將左側欄擴展到滾動頁面底部

我正在嘗試在我的網站上製作左側欄。目前，它只擴展到可見窗口的底部。如果我在網頁上向下滾動，則會顯示左側欄的底部邊緣。換句話說，它不會一直到頁面的底部。我需要這個左側欄與網頁一起滾動，但也一直到底部。這裏是我的代碼的簡化版本：HTML將左側欄擴展到滾動頁面底部

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

我也有一個畫布固定在網頁的背景：

<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，它似乎並沒有工作。我試過位置：固定了，但這不是我正在尋找的。通常情況下，左側欄應與其餘頁面一起滾動（就像它已連接一樣），但也會一直延伸到底部。

來源

2017-07-30 Daniel Williams

CSS代碼是：

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>

來源

2017-07-30 05:55:23

我欣賞的答案，但是這不是我的「，其餘滾動意思的頁面「。溢出-y：滾動將滾動條放在左側欄上。我的意思是讓它滾動，就好像它連接到頁面的其餘部分，所以屏幕右側只有一個滾動條。溢出的文本不在左欄中，而是在網頁的中心部分。 –

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

來源

2017-07-30 06:08:45

正如我對Rafiqul Islam的回答所說的，我並沒有試圖在左欄上找到滾動條。我在這個問題中也提到過這個問題：固定不是我正在尋找的。它不應該相對於瀏覽器窗口固定，而是相對於滾動網頁固定的。 –

我無奈使出JavaScript來解決這個問題。我用下面的代碼位只是網頁加載後設置左邊欄的最大網頁高度的高度：

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);

來源

2017-07-30 19:11:43

HTML將左側欄擴展到滾動頁面底部

回答

相關問題