Javascript 在w3school的html示例中，无法在侧面板中完全向下滚动

我创建了一个示例：

与W3学校中的这一点完全相同：

除了我的在侧板上有更多的锚定标签

为什么不能滚动到左窗格的最底部

在某种程度上，当你使用滚动条或鼠标滚轮向下滚动时，我发现这种行为有所不同，所以请尝试两者。我尝试了Chrome和Firefox

Html:

将此添加到CSS中

.sideNav {
  overflow: auto;
}

---

应该可以了。

问题与顶部填充有关。删除它将使整个内容得以显示

这里有一个例子

---

你只需要减少填充物

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 10px;
}

下面是一个工作示例

---

主要问题是

padding top

属性将内容向下推，但溢出仅限于高度。 如果要使用

100%

高度计算填充，则必须修改

框大小

.sidenav {
  box-sizing: border-box;
}

答案基于：

工作区：

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 10px;
}

.sidenav {
  box-sizing: border-box;
}