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将左侧栏扩展到滚动页面底部

回答

相关问题