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

Question

我做了一个侧边栏，当我需要向下滚动时（我只是在 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>

Answer 1

无论出于何种原因，您都将侧边栏高度降低了 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;
}

Answer 2

高度是无限的，元素不会无限扩展来填充它，这没有多大意义，高度仅由内容定义，如果您希望元素始终与您的内容一样高页面，你必须让他们共享一个父级，在这种情况下它是正文。

正文的高度将扩展以适合其内容，然后我们将其高度分配给侧边栏，因此它始终与文档一样高。

侧面是绝对定位的，因此我们必须相对于主体进行定位才能匹配它的高度

body {
    position:relative;
}

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

body {
  margin: 0;
  position: relative;
}

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

.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;
}

[long] {
  height: 6000px;
}

<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>
<div long></div>

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

sidebar background is not going full to the bottom

css

sidebar