如何设置导航菜单在无固定高度导航栏下填充剩余垂直空间

不需要调整现有HTML结构，直接修改CSS即可实现导航菜单填充剩余垂直空间、无滚动条的效果，具体修改如下：

• 首先清除浏览器默认边距，避免意外撑出滚动条

body {
  margin: 0;
}

• 修改header样式，让它占满整个视口高度，启用纵向弹性布局，为内部元素分配空间提供基础

.header {
  /* 保留原有背景、文字颜色样式，追加以下属性 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

• 给导航容器设置弹性增长属性，让它自动占据header中除顶部logo区、电话按钮区之外的所有剩余空间

.navigation {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

• 修改导航列表样式，清除列表默认内外边距，让导航项均匀分布在剩余空间内

.nav-list {
  /* 保留原有列表、背景、文字对齐样式，追加以下属性 */
  flex-grow: 1;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; /* 可根据需求替换为center，实现导航项整体居中 */
}

小提示：如果需要实现菜单展开/收起的过渡动画，可以把.hidden类的display: none替换为height: 0; overflow: hidden;，搭配transition属性即可实现平滑动画，不会影响高度填充效果。

• 使用position: absolute时如果没有给父级header设置相对定位，也没有给导航元素设置top/bottom/left/right的方位约束，元素无法自动识别剩余空间边界，自然不能实现填充效果
• 手动写死高度的方案适配性极差，不同设备视口高度不一致，要么高度不足留空白，要么高度超出视口出现滚动条

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