如何阻止我的 body 元素在导航栏后面滚动？

Question

我对前端完全陌生，使用 html 和 css 编码已有 3-4 个月了。

我目前正在完成免费代码训练营的免费课程，并且正在处理技术文档页面。

我的主要问题是弄清楚如何阻止我的 body 元素在位于左侧的导航栏后面滚动。我希望 body 元素只滚动 upwards/downwards.

我的第二个问题是弄清楚如何构建我的列表项，使列表项周围的顶部和底部边框在导航栏内完全延伸

这是我的项目 --> https://codepen.io/kboogie/pen/zYzBwXa

感谢您的帮助，抱歉解释不当

body { line-height: 30px;
  min-width: 100%;
  font-family: Azeret Mono, monospace;
  padding-left: 250px;
}

#navbar { position: fixed;
  left: 0px;
  top: 0px;
  height: 100%; 
  border-right: solid;
  border-color: rgba(44, 187, 0, 0.603); 
  background-color: rgb(223, 253, 170);}

header { 
  text-align:left;
}
.head-n { text-align: center;}

li { 
  padding-right: 10px;
  list-style: none;
}

Answer 1

这是您第一个问题的解决方案。问题来自设置 min-width: 100% 和 padding-left: 250px。这将导致所有内容为宽度的 100% 加上额外的 250 像素。这将始终导致内容太大而无法显示在屏幕上。这就是导致水平滚动条的原因。

要解决此问题，您应该从 body{} 中删除 min-width: 100%。不需要这种样式，因为无论屏幕大小，文本都会自动换行。

如何阻止我的 body 元素在导航栏后面滚动？

How do I stop my body element from scrolling behind my nav bar?

html

css

grid

layout

flexbox