为什么垂直滚动条在 HTML/CSS 中不起作用？

Question

我目前正在学习 FreeCodeCamp 课程，我正在尝试复制这个网站：https://codepen.io/freeCodeCamp/full/NdrKKL. The navigation bar on the left has a vertical scrollbar. On other posts I read that setting the parents' height element to 100% would fix it. Somehow, I can't seem to fix this in my code. This is the current state of my website: https://codepen.io/otapadar/full/VwKBvXB。

如有任何帮助，我们将不胜感激。请参阅下面我的代码：

PS：我在每个列表元素周围添加了边框。它们重叠，这使得边框的厚度是我想要的两倍。如果有人也知道如何解决这个问题，那也将不胜感激！感谢您的宝贵时间！

HTML（只有重要的东西）：

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<nav id="navbar">
  <header>
    <h1>JS Documentation</h1>
  </header>
  <ul>
    <li><a class="nav-link" href=#introduction>Introduction</a></li>
    <li><a class="nav-link" href=#what_you_should_know>What You Should Know</a></li>
    <li><a class="nav-link" href=#javascript_and_java>JavaScript and Java</a></li>
    <li><a class="nav-link" href=#hello_world>Hello World</a></li>
    <li><a class="nav-link" href=#variables>Variables</a></li>
    <li><a class="nav-link" href=#declaring_variables>Declaring Variables</a></li>
    <li><a class="nav-link" href=#variable_scope>Variable Scope</a></li>
    <li><a class="nav-link" href=#global_variables>Global Variables</a></li>
    <li><a class="nav-link" href=#constants>Constants</a></li>
    <li><a class="nav-link" href=#data_types>Data Types</a></li>
    <li><a class="nav-link" href=#if/else_statements>If/Else Statements</a></li>
    <li><a class="nav-link" href=#while_statements>While Statements</a></li>
  </ul>
</nav>

CSS（全部）：

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* { 
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', Arial;
  line-height: 1.5;
  height: 100%;
}

code {
  display: block;
  white-space: pre-wrap;
}

nav {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  border-right: 2px solid #a9a9a9;
  min-width: 290px;
  min-height: 100%;
}

nav > header {
  margin: 1rem 0;
  text-align: center;
}

nav > ul {
  list-style-type: none;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

nav > ul > li {
  border-top: 1px solid #a9a9a9;
  border-bottom: 1px solid #a9a9a9;
  padding: 0.5rem 1rem;
}

.nav-link {
  text-decoration: none;
}

main {
  margin-left: 310px;
  padding: 0 20px;
}

Answer 1

将高度设置为 100%，并删除底部边框。请检查以下代码。

nav {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  border-right: 2px solid #a9a9a9;
  min-width: 290px;
  min-height: 100%;
  height: 100%;
}
nav > ul > li{
    border-top: 1px solid #a9a9a9;
    padding: 0.5rem 1rem;
}

Answer 2

我将 ul 高度更改为：calc(100vh - 4em);。导航栏的 Header 的高度为 2em (h1)，顶部和底部的填充 1em 均等于 4em。这样列表就有了确定的高度，实际上可以使用滚动条来溢出。使用 height: 100% 时，它会将内容高度的 100% 作为高度，因此实际上不会溢出。

* { 
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', Arial;
  line-height: 1.5;
}

code {
  display: block;
  white-space: pre-wrap;
}

nav {
  box-sizing: border-box;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  border-right: 2px solid #a9a9a9;
  min-width: 290px;
  height: 100vh;
}

nav > header {
  margin: 1rem 0;
  text-align: center;
}

nav > ul {
  list-style-type: none;
  width: 100%;
  overflow-y: auto;
  height: calc(100vh - 4em);
}

nav > ul > li {
  border-top: 1px solid #a9a9a9;
  border-bottom: 1px solid #a9a9a9;
  padding: 0.5rem 1rem;
}

.nav-link {
  text-decoration: none;
}

main {
  margin-left: 310px;
  padding: 0 20px;
}

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<nav id="navbar">
  <header>
    <h1>JS Documentation</h1>
  </header>
  <ul>
    <li><a class="nav-link" href=#introduction>Introduction</a></li>
    <li><a class="nav-link" href=#what_you_should_know>What You Should Know</a></li>
    <li><a class="nav-link" href=#javascript_and_java>JavaScript and Java</a></li>
    <li><a class="nav-link" href=#hello_world>Hello World</a></li>
    <li><a class="nav-link" href=#variables>Variables</a></li>
    <li><a class="nav-link" href=#declaring_variables>Declaring Variables</a></li>
    <li><a class="nav-link" href=#variable_scope>Variable Scope</a></li>
    <li><a class="nav-link" href=#global_variables>Global Variables</a></li>
    <li><a class="nav-link" href=#constants>Constants</a></li>
    <li><a class="nav-link" href=#data_types>Data Types</a></li>
    <li><a class="nav-link" href=#if/else_statements>If/Else Statements</a></li>
    <li><a class="nav-link" href=#while_statements>While Statements</a></li>
  </ul>
</nav>

为什么垂直滚动条在 HTML/CSS 中不起作用？

Why is the vertical scrollbar not working in HTML/CSS?

html

javascript

css

grid

flexbox