Css 侧边栏背景未完全显示在底部

我制作了一个侧边栏，当我需要向下滚动时（我只是在html上放了一些“
”来测试滚动），侧边栏在某个点结束，我希望能够看到背景直到页面底部

我该怎么做？ 下面是一个快速gif，看看发生了什么：

这是CSS

.sidebar {
    position: absolute;
    background: #232428;
    min-height: calc(100vh - 59px);
    width: 220px;
}

.sidebar ul {
    list-style-type: none;
}

.sidebar li {
    font-size: 16.5px;
    padding-left: 20px;
    padding-bottom: 15px;
}

span {
    font-size: 15px;
    padding: 2px 6px;
    float: right;
    margin-right: 4px;
}

.sidebar .title_elements {
    padding-top: 15px;
    padding-bottom: 10px;
    font-family: 'Rubik';
}

.sidebar li a {
    padding-top: 10px;
    color: #B8B7B7;
    text-decoration: none;
    font-weight: 550;
}

.sidebar .header_buttons button {
    float: left;
    font-size: 12px;
    padding: 5px 10px;
    margin-right: 5px;
    padding-bottom: 5px;
    color: #B7B7B7;
    background-color: #393B41;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: none;
    border-radius: 5px;
}

.sidebar .header_buttons {
    padding-top: 15px;
    padding-bottom: 25px;
    
}

.sidebar li i {
    padding-right: 10px;
    padding-top: 2.5px;
}

和HTML：

<div class="sidebar">
            <ul>
                <li class="header_buttons">
                    <button>Login</button>
                    <button>Registration</button>
                </li>
                <li class="title_elements">MAIN MENU</li>
                <div class="elements">
                    <li><a href="#"><i class="fa fa-cloud"></i>The latest releases</a></li>
                    <li><a href="#"><i class="fa fa-clock-o"></i>The last episodes</a></li>
                    <li><a href="#"><i class="fa fa-star"></i>Top viewed</a></li>
                    <li><a href="#"><i class="fa fa-heart"></i>Top voted</a></li>
                </div>
                <li class="title_elements">GENRES</li>
                <div class="elements">
                    <li><a href="#"><i class="fa fa-caret-square-o-right"></i>Actiune <span class="count">132</span></a></li>
                    <li><a href="#"><i class="fa fa-caret-square-o-right"></i>Comedy <span class="count">52</span></a></li>
                    <li><a href="#"><i class="fa fa-caret-square-o-right"></i>Crime <span class="count">15</span></a></li>
                    <li><a href="#"><i class="fa fa-caret-square-o-right"></i>SF <span class="count">75</span></a></li>
                    <li><a href="#"><i class="fa fa-caret-square-o-right"></i>Documentary <span class="count">2</span></a></li>
                    <li><a href="#"><i class="fa fa-caret-square-o-right"></i>Family <span class="count">30</span></a></li>
                    <li><a href="#"><i class="fa fa-caret-square-o-right"></i>Drama <span class="count">88</span></a></li>
                    <li><a href="#"><i class="fa fa-caret-square-o-right"></i>Fantasy <span class="count">10</span></a></li>
                    <li><a href="#"><i class="fa fa-caret-square-o-right"></i>History <span class="count">251</span></a></li>
                </div>
            </ul>
        </div>

登录
登记处

主菜单




体裁

无论什么原因，您都将侧边栏高度降低了59像素。移除59px

min高度：计算（100vh-59px）现在侧边栏已达到视口的全部高度


。侧栏{
位置：绝对位置；
背景：#232428；
最小高度：计算（100vh）；/*移除-59px*/
宽度：220px；
}
.侧边栏{
列表样式类型：无；
}
.侧边栏李{
字号：16.5px；
左侧填充：20px；
垫底：15px；
}
跨度{
字体大小：15px；
填充：2px6px；
浮动：对；
保证金权利：4px；
}
.sidebar.title_元素{
填充顶部：15px；
垫底：10px；
字体系列：“魔方”；
}
.侧边栏李a{
填充顶部：10px；
颜色：#B8B7B7；
文字装饰：无；
字号：550；
}
.侧栏.标题按钮{
浮动：左；
字体大小：12px；
填充物：5px10px；
右边距：5px；
垫底：5px；
颜色：#b7b7；
背景色：#393B41；
-webkit边界半径：3px；
-moz边界半径：3px；
边界：无；
边界半径：5px；
}
.侧栏.标题按钮{
填充顶部：15px；
垫底：25px；
}
.侧边栏李i{
右边填充：10px；
衬垫顶部：2.5px；
}
高度是无限的，元素不只是无限扩展以填充它，这没有多大意义，高度仅由内容定义，如果您希望元素始终与页面中的内容一样高，则必须使它们共享一个父元素，在这种情况下，就是主体

主体的高度将扩展以适应其内容，然后我们将其高度指定给侧边栏，使其始终与文档一样高

侧面是绝对定位的，因此我们必须使其相对于身体，以匹配其高度

body {
    position:relative;
}

.sidebar {
      /* ... */
      height: 100%;
}


正文{
保证金：0；
位置：相对位置；
}
.侧边栏{
位置：绝对位置；
背景：#232428；
最小高度：计算（100vh-59px）；
宽度：220px；
高度：100%；/*新*/
}
.侧边栏{
列表样式类型：无；
}
.侧边栏李{
字号：16.5px；
左侧填充：20px；
垫底：15px；
}
跨度{
字体大小：15px；
填充：2px6px；
浮动：对；
保证金权利：4px；
}
.sidebar.title_元素{
填充顶部：15px；
垫底：10px；
字体系列：“魔方”；
}
.侧边栏李a{
填充顶部：10px；
颜色：#B8B7B7；
文字装饰：无；
字号：550；
}
.侧栏.标题按钮{
浮动：左；
字体大小：12px；
填充物：5px10px；
右边距：5px；
垫底：5px；
颜色：#b7b7；
背景色：#393B41；
-webkit边界半径：3px；
-moz边界半径：3px；
边界：无；
边界半径：5px；
}
.侧栏.标题按钮{
填充顶部：15px；
垫底：25px；
}
.侧边栏李i{
右边填充：10px；
衬垫顶部：2.5px；
}
[长]{
高度：6000px；
}



登录
登记处

主菜单




体裁










不工作，我删除了-59px，但仍然是一样的。您能分享更多详细信息吗，关于哪个浏览器、操作系统和视口大小？预览时只需在html中放入100x
，查看是否不起作用。。在JSFIDLE上进行测试，不太适用于Ank you，它工作得非常完美！我明白这是怎么回事，我很感激你的回答。再次感谢你！