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

Posted 2023-03-05

【中文标题】如何阻止我的 body 元素在导航栏后面滚动？

【英文标题】：How do I stop my body element from scrolling behind my nav bar?

【发布时间】：2021-11-04 14:57:36

【问题描述】：

我是前端的新手，使用 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;

【参考方案1】：

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

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

【讨论】：

感谢您的帮助，迈克尔！