【发布时间】：2020-09-05 09:09:35
【问题描述】：
我正在使用网格布局，如果我将位置设置为固定，滚动在侧边栏上不起作用，它会更改布局并且在屏幕缩小时无法正常工作。但是，如果我没有将位置设置为固定，那么侧边栏就不是固定的。我试图改变边距填充和不同的位置来修复它但没有运气 我怎么解决这个问题。 提前致谢
.wrapper{
display:grid;
grid-template-areas:
"nav"
"main";
width:100%;
}
.navbar{
grid-area:nav;
height:100%;
box-shadow: 2px 2px 10px white;
margin:0;
padding:0;
top:0;
overflow-y:auto;
}
.navbar ul{
list-style-type:none;
font-size:1.2em;
display:flex;
flex-direction:column;
padding:0;
margin:0;
}
.navbar li{
display:flex;
}
.nav-link{
text-decoration:none;
color:black;
display:flex;
flex:1;
padding:5px 0px 5px 10px;
font-size:1.2rem;
}<div class="wrapper">
<nav class="navbar">
<header id="head">Learn <span style="color:green">HTML</span</header>
<hr>
<ul>
<li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
<li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
<li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
<li><a href="#html_head" class="nav-link">HTML Headings</a></li>
<li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
<li><a href="#html_links" class="nav-link">HTML Links</a></li>
<li><a href="#" class="nav-link">HTML Images</a></li>
</ul>
</nav>
<main class="main-doc"></main>
</div>如果我将位置设置为固定，请查看代码，它会显示不需要的间距 https://codepen.io/Navbham/pen/OJNOqJv
【问题讨论】：
-
你能添加你的html代码吗？
-
我也添加了html代码
-
当链接元素很多时，滚动在我这边工作。增加你的列表元素并检查
-
不，即使在向侧边栏添加更多项目后，它对我也不起作用
-
我刚刚发布了一个答案，运行它看看。不要忘记在导航栏 CSS 中添加固定位置