旋转90度的Flexbox导航栏定位无响应问题求助

核心思路 #

放弃直接旋转整个导航容器的方案，改为垂直布局导航项+单独旋转文本，从根源避免transform: rotate带来的溢出、定位偏移和响应逻辑混乱问题，同时天然满足高度响应需求。

具体实现代码 #

基础HTML结构 #

<nav class="navbar">
  <a href="#" class="nav-item">首页</a>
  <a href="#" class="nav-item">产品</a>
  <a href="#" class="nav-item">关于我们</a>
  <a href="#" class="nav-item">联系我们</a>
</nav>

修改后CSS代码 #

/* 导航容器：固定左侧，占满视口高度 */
.navbar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh; /* 完全响应设备高度 */
  width: 80px; /* 固定宽度，不受视口宽度影响 */
  display: flex;
  flex-direction: column;
  justify-content: space-around; /* 均匀分配高度，近似grid 1fr效果 */
  align-items: center;
  border-right: 2px solid #000; /* 右侧黑线，替代原底部边框 */
  background-color: #fff;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 导航项：单独旋转文本，保证hover区域正常 */
.nav-item {
  display: block;
  transform: rotate(90deg); /* 仅旋转文本，不影响容器布局 */
  white-space: nowrap; /* 防止文本换行溢出 */
  padding: 1rem 0;
  text-decoration: none;
  color: #333;
  transition: color 0.3s ease;
}

/* hover效果：保持原有交互逻辑 */
.nav-item:hover {
  color: #007bff;
}

需求匹配说明 #

• 响应设备高度：容器用100vh直接占满视口高度，随设备高度自动适配
• 近似grid 1fr分配：justify-content: space-around让导航项均匀分布；若需严格等分高度，可给.nav-item加flex:1，同时将容器的justify-content改为center，并给.nav-item添加display:flex; align-items:center; justify-content:center
• 文本始终可见：容器固定宽度+文本不换行，旋转后不会超出视口范围
• 不受宽度影响：容器宽度固定，布局逻辑仅关联视口高度
• 间距稳定：flex布局的均匀分配逻辑保证间距不会随视口尺寸大幅变化
• 黑线在右侧：直接用border-right实现，无需额外旋转操作

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