主内容增加后侧边栏sidenav链接无法点击及滚动需求求助

问题根因 #

侧边栏无法点击的核心问题是你给.sidenav设置了z-index: -1：z-index为负值的元素会堆叠在普通文档流元素的下层，当main区块内容较少时，main块高度不足没有覆盖侧边栏区域，你还能正常点击链接；一旦main内容增加、高度超过侧边栏高度，整个侧边栏区域都会被上层的main块覆盖，自然无法触发链接的点击事件，该问题和margin、padding配置无关。

修复方案 #

1. 解决链接无法点击问题 #

将.sidenav样式中的z-index: -1删除，或者修改为z-index: 1，保证侧边栏的堆叠层级高于main区块即可。

2. 实现侧边栏独立滚动、不撑满页面效果 #

你已经配置了overflow-y: scroll，只需要额外给侧边栏增加最大高度限制即可，比如新增max-height: calc(100vh - 120px)，含义是侧边栏最大高度为视口总高度减去顶部120px的留白，内容超过该高度时会自动在侧边栏内部出现滚动条，不会撑满整个页面。同时建议将overflow-y: scroll改为overflow-y: auto，内容高度不足时不会显示无意义的空滚动条。

3. 不需要使用iframe嵌入单独侧边栏页面 #

你当前的结构只要修改样式就能实现全部需求，使用iframe嵌入单独页面反而会增加跳转逻辑、样式同步的额外复杂度，完全没必要。

修改后的完整侧边栏样式参考 #

div.sidenav {
  width: 240px;
  position: absolute;
  z-index: 1; /* 原z-index:-1修改为1 */
  top: 110px;
  left: 10px;
  background: transparent;
  overflow-y: auto; /* 原scroll修改为auto */
  overflow-x: hidden;
  max-height: calc(100vh - 120px); /* 新增高度限制 */
  padding: 8px 0;
  border-style: dashed; 
  color: #28eb4c;
  text-align: center;
}

main区块的原有样式不需要做任何修改。

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