如何阻止body内容滚动到左侧固定导航栏后及导航列表边框设置

问题1：正文内容遮挡左侧固定导航解决方法 #

出现该问题的核心原因有两点：

1. 固定定位的#navbar未设置明确宽度，也没有配置层级参数，固定定位元素默认层级和正文普通流元素同级，正文后渲染会覆盖导航
2. body设置min-width: 100%同时加了左内边距，默认盒模型下内边距会额外撑宽容器，导致横向滚动，部分正文内容会偏移到导航下方
   修改代码如下：
   给body添加盒模型属性：

body { 
  line-height: 30px;
  min-width: 100%;
  font-family: Azeret Mono, monospace;
  padding-left: 250px;
  box-sizing: border-box; /* 内边距计入宽度计算，不会额外撑宽容器 */
}

给#navbar添加宽度和层级属性：

#navbar { 
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%; 
  width: 250px; /* 和body的padding-left数值对齐 */
  z-index: 999; /* 拉高导航层级，保证不会被正文覆盖 */
  border-right: solid;
  border-color: rgba(44, 187, 0, 0.603); 
  background-color: rgb(223, 253, 170);
}

问题2：导航内列表项边框无法铺满导航宽度解决方法 #

出现该问题的核心原因是导航内的<ul>元素有浏览器默认的左内边距，未手动重置的话，li元素的渲染范围被限制在ul的内边距内侧，边框自然无法铺满导航全宽。
修改代码如下：
新增导航内ul的默认样式重置：

#navbar ul {
  margin: 0;
  padding: 0; /* 清除浏览器默认的左内边距 */
}

调整li的样式：

li { 
  box-sizing: border-box; /* 内边距计入宽度计算 */
  width: 100%; /* 宽度铺满父容器 */
  padding: 0 15px; /* 调整左右内边距，避免文字贴边 */
  list-style: none;
}

内容的提问来源于stack exchange，提问作者kboogie