设置navbar为position:fixed时网页顶部出现空白的问题求助

解决方案 #

1. 显式重置html元素样式 #

全局重置可能未覆盖部分浏览器对html的默认样式，添加：

html {
  margin: 0;
  padding: 0;
}

2. 修复导航栏宽度溢出问题 #

导航栏设置width:100%加上左右padding: 10px 100px，会导致横向溢出触发布局偏移。修改导航栏定位方式：

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0; /* 替换width:100%，自动适配全屏宽度 */
  padding: 10px 100px;
}

3. 移除CSS语法错误 #

原CSS代码中.content p样式后多了一个多余的闭合大括号}，会导致后续样式解析异常，需删除该括号。

4. 排查滚动事件影响 #

临时注释JavaScript滚动事件代码，测试空白是否消失。若消失，检查scroll-up/scroll-down类是否有影响html/body布局的样式。

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