html - 垂直滚动条不起作用

Question

这是我的 HTML 代码:

<div id="section">

    <div class="row container-fluid" style="overflow: hidden;">
        <div class="col-md-2" style="background-color: red; top: 0; height: auto; overflow-y: auto; ">
            <ul>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
            </ul>
        </div>
        <div class="col-md-10" style="background-color: green; top: 0; height: 400px; "></div>
    </div>
</div>

这是我的 CSS 代码:

* {
    margin: 0;
    padding: 0;
}

html{
    height: 100%;
    overflow: hidden;
}
body {
background-color: #F7F9F9 !important;

}

.navbar{
    background-color: #FDFEFE !important;
    padding: 0;
    margin: 0 !important;
}

.navbar-header{
    width: 100%;
    margin: 0;
    padding: 0;
}

#section .row{
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

.col-md-2{
    overflow-y: auto;
}

::-webkit-scrollbar {
  -webkit-appearance:none;
  width:12px;
  _background-color:#f0f0f0;
}

::-webkit-scrollbar-thumb {
  border-radius:12px;
  border:4px solid rgba(255,255,255,0);
  background-clip:content-box;
  _background-color:#bfbfbf;
  background-color: #A0A0A0;
}
::-webkit-scrollbar-thumb:hover {
    border-radius:12px;
    border:4px solid rgba(255,255,255,0);
    background-clip:content-box;
    background-color:#A0A0A0;}

::-webkit-scrollbar-corner {
    background-color:#e6e6e6;}

我想要细长的垂直滚动条。每个人似乎都在做同样的事情，但它对我不起作用。仅供引用，我从其他各个网站复制了这个，所以我可能在某些地方出错了。我希望有人能帮助我。

Answer 1

overflow: hidden 正在阻止显示超出视口(viewport)的任何内容。因此，您不能滚动到 100% 以下，因为没有低于 100% 的地方。

html{
    height: 100%;
    overflow: hidden; /* Remove this */
}