[英]Why is the vertical scrollbar not working in HTML/CSS?
I am currently doing the FreeCodeCamp course and I am trying to replicate this website: https://codepen.io/freeCodeCamp/full/NdrKKL .我目前正在参加 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.
在其他帖子中,我读到将父母的高度元素设置为 100% 可以解决此问题。 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 .
这是我网站的当前 state: https://codepen.io/otapadar/full/VwKBvXB 。
Any help would be greatly appreciated.任何帮助将不胜感激。 See below my code:
请参阅下面我的代码:
PS: I have added borders around each list-element. PS:我在每个列表元素周围添加了边框。 They overlap, which makes the border twice as thick as I intend them to be.
它们重叠,这使得边界是我想要的两倍厚。 If someone also knows how to fix this, then that would also be greatly appreciated!
如果有人也知道如何解决这个问题,那也将不胜感激! Thanks for your time!
谢谢你的时间!
HTML (Only important stuff): 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 (Everything): 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;
}
I changed the ul
height to: calc(100vh - 4em);
我将
ul
高度更改为: calc(100vh - 4em);
. . The Header of the navbar has a height of
2em
(h1) and a padding top and bottom of 1em
each equals 4em
.导航栏的 Header 的高度为
2em
(h1),顶部和底部的填充分别为1em
等于4em
。 That way the list has a definite height and can actually use a scrollbar to overflow.这样列表就有了确定的高度,并且实际上可以使用滚动条来溢出。 With height: 100% it will takes 100% of the contents height as height and therefor it will be impossible to actually overflow.
使用 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>
make the height to 100% and for li remove border-bottom.将高度设置为 100% 并为 li 删除边框底部。 Please check the following code.
请检查以下代码。
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.