时间戳

首页 > 解决方案 > 侧边栏背景没有完全到底部

css - 侧边栏背景没有完全到底部

问题描述

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

我怎样才能做到这一点？这是一个快速 gif，也可以查看发生了什么：https ://i.gyazo.com/f08b7fbf0592a89bc08da7e2625a86f1.mp4

这是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>

标签： csssidebar

解决方案

无论出于何种原因，您都将侧边栏高度降低了 59 像素。删除了 59px min-height: calc(100vh - 59px);，现在侧边栏达到了视口的全高。

.sidebar {
    position: absolute;
    background: #232428;
    min-height: calc(100vh); /*removed  - 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;
}

推荐阅读