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

Question

我是前端的新手，使用 html 和 css 编码已经 3-4 个月了。

我目前正在完成关于免费代码营的免费课程，并且正在开发技术文档页面。

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

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

这是我的项目 --> 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%。不需要这种样式，因为无论屏幕大小，文本都会自动换行。