小屏笔记本上垂直导航栏底部内容被任务栏遮挡的问题排查

问题根源 #

之前尝试flex:1、justify-content:space-around无效，本质是两个核心问题：

• 导航容器高度计算逻辑错误，直接使用100vh或者bottom:0的全高配置，没有扣除系统任务栏占用的安全边距，导致底部内容超出可视范围
• flex布局没有对导航内容做分组拆分，直接给所有子项加间距属性，导致间距被平均分配后，底部功能图标刚好落在遮挡区域

具体实现（无需绝对定位） #

1. 修正导航根容器配置 #

把原有导航根元素的高度、布局属性替换为以下配置：

.nav-container {
  position: fixed;
  left: 0;
  top: 0;
  /* 用动态视口高度替代旧的100vh，自动适配系统UI边距 */
  height: 100dvh;
  /* 兼容旧浏览器降级写法 */
  height: calc(100vh - env(safe-area-inset-bottom, 0px));
  /* 开启垂直flex布局作为容器根 */
  display: flex;
  flex-direction: column;
  /* 用space-between替代space-around，避免上下间距平分导致内容溢出 */
  justify-content: space-between;
  /* 禁止内容溢出容器 */
  overflow: hidden;
  /* 加最小12px的底部内边距，额外预留安全距离 */
  padding-bottom: max(env(safe-area-inset-bottom), 12px);
  /* 保证内边距不撑大容器高度 */
  box-sizing: border-box;
}

2. 调整HTML结构分组 #

不需要改动原有菜单项代码，只要把内容分成3个独立区块即可：

<nav class="nav-container">
  <!-- 顶部主菜单组：原有导航项直接放在这里 -->
  <div class="nav-main-group">
    <!-- 原有导航菜单内容 -->
  </div>
  <!-- 中间弹性占位块：自动占据剩余垂直空间 -->
  <div class="nav-flex-placeholder"></div>
  <!-- 底部功能组：原有@、设置图标放在这里 -->
  <div class="nav-bottom-group">
    <!-- 原有底部功能图标 -->
  </div>
</nav>

3. 补充占位块样式 #

.nav-flex-placeholder {
  /* 自动撑开上下间距，把底部功能组顶到容器最下方 */
  flex: 1;
}

方案优势 #

• 不需要单独给底部图标加position:absolute硬编码定位，所有位置由flex布局自动计算
• 不管屏幕高度、系统任务栏宽度怎么变化，底部功能区都会自动落在可视区域内
• 不需要针对小屏幕单独写媒体查询，大尺寸显示器上的显示效果不会被改动

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