為什么垂直滾動條在 HTML/CSS 中不起作用？

Question

我目前正在參加 FreeCodeCamp 課程，我正在嘗試復制這個網站： https://codepen.io/freeCodeCamp/full/NdrKKL 。 左側的導航欄有一個垂直滾動條。 在其他帖子中，我讀到將父母的高度元素設置為 100% 可以解決此問題。 不知何故，我似乎無法在我的代碼中解決這個問題。 這是我網站的當前 state： 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

我將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>

Answer 2

將高度設置為 100% 並為 li 刪除邊框底部。 請檢查以下代碼。

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