编辑移动端网站设计后桌面端无法滚动，CSS错误排查

问题定位 #

你遇到的桌面端无法滚动的问题和通用选择器设置、选择器优先级都无关，也不需要额外加媒体查询，核心问题出在根元素高度设置和绝对定位滥用两个点上。

具体问题答疑 #

• 与通用选择器（）无关：你当前选择器仅做了默认边距、列表样式的统一重置，没有设置影响滚动的属性
• 不需要新增媒体查询：当前问题是全局布局规则错误导致的，和响应式断点配置没有关联
• 与选择器优先级无关：所有生效样式不存在优先级覆盖冲突，滚动异常不是样式被覆盖导致的

代码错误修复 #

1. 修正html、body的高度规则
   你给html和body设置了固定的height: 100%，会让两个根元素高度被锁死为当前视口高度，内容超出视口后也不会撑开高度，自然无法滚动，改成min-height: 100%即可，同时可以删掉没用的text-decoration: none属性，这个属性放在根元素上不会继承给链接标签，没有实际作用：

html,
body {
  background-color: black;
  width: 100%;
  min-height: 100%; /* 替换原有height: 100% */
  max-width: 100%;
  overflow-x: hidden;
}

2. 优化绝对定位逻辑
   你当前给导航按钮、头像、标题、说明文字全部设置了position: absolute，绝对定位的元素会脱离正常文档流，这些元素的高度不会被计入页面总高度。如果桌面端视口高度小于这些元素的总占位高度，内容就会被截断，建议给头部元素套一层外层容器，用flex或者常规流布局排列内部元素，不要全用绝对定位。

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