移动端固定导航左侧偏移 height:100vh未占满全屏视口高度

• 为nav设置position: fixed后未指定top、left等方位偏移属性，此时固定定位元素会保留在正常文档流中的初始位置：父元素header配置了padding: 0 1rem，直接导致nav左侧出现1rem的异常边距；同时nav顶部起始位置对齐header内容区顶部，设置的height: 100vh会向下溢出视口，视觉上表现为高度无法占满整个视口。

调整nav样式，补充方位偏移属性，强制导航对齐视口边缘：

nav {
  background-color: bisque;
  height: 100vh;
  width: 100vw;
  position: fixed;
  /* 新增以下属性，固定导航至视口左上角 */
  top: 0;
  left: 0;
}

如果要实现初始隐藏在右侧、滑动展开至全屏的交互效果，可以补充过渡动画相关样式：

nav {
  /* 保留上述原有样式 */
  /* 初始状态偏移到视口外 */
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
/* 展开状态添加该类名即可滑入 */
nav.active {
  transform: translateX(0);
}

内容的提问来源于stack exchange，提问作者Matheus Tenório