我有一个粘性的侧边栏，它的高度为calc(100vh-90px)和Main.侧边栏有一些动态内容，所以当内容大于高度时，它会有滚动条.正文的内容很多，所以很长.当Main到达页脚时，是否可以使侧边栏滚动到底部？用侧边栏height: auto，它可以工作，但我想要有准确的屏幕高度.任何关于这方面的线索都将不胜感激.
最小的html如下所示；
<nav></nav>
<div class="wrapper">
<div class="main"></div>
<div class="sidebar></div>
</div>
<footer/>
侧边栏上的css是；
position: sticky;
top: 90px;
height: calc(100vh-90px);
overflow-y: scroll;
使用footerInView检测页脚的位置.
将侧边栏的滚动条移到底部sidebar.scrollTop.
const footerInView = () => window.scrollY + window.innerHeight > document.querySelector('footer').offsetTop
const sidebar = document.querySelector('.sidebar')
document.addEventListener('scroll', () => {
if (footerInView()) sidebar.scrollTop = sidebar.scrollHeight
})html {
scroll-behavior: smooth;
}
.sidebar {
background: black;
color: white;
width: 400px;
position: sticky;
top: 90px;
height: calc(100vh - 90px);
overflow-y: scroll;
}
footer {
height: 100px;
background: black;
}<nav></nav>
<div class="wrapper">
<div class="sidebar">
<div style="height:2000px;display: flex;align-items: end;">sidebar bottom</div>
</div>
<div class="main" style="height: 2000px;"></div>
</div>
<footer>
footer
</footer>